ungrid

ungrid is a responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids.

ungrid-flex.css (76 bytes minified):

@media (min-width: 30em) {
    .row { display: flex; flex-wrap: nowrap; }
    .col { flex-grow: 1; }
}

Nesting is super easy !

A .col can be a .row, and that's all.

<div class="row">
    <div class="col"></div>
    <div class="col row">
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

Need specific column widths?

Flex is also ready for that, use flex-basis property with the shorthand :
(flex-grow needs to be forced to 0)

flex: 0 [WIDTH];
flex: 0 15%;
flex: 0 400px;

Both fixed and percentage base widths work perfectly. You can even use them together. The remaining columns will take up the rest of the available space.