ungrid

by @chrisnager

the simplest responsive css grid

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.css (97 bytes minified):

@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}

Need specific column widths?

Go for it. 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.

80%
40%
20%
40%
425px
15%
200px
25%