This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables.
CSS grid systems are typically built in one of two ways today—
floats or some
display: inline-block; hackery. Both are fine and well established, but
tables are way fucking cooler thanks to
table-layout and dead simple alignment.
Let’s take a look.
The typical approach is to create twelve fixed-width columns in all the usual combinations. Cool, super easy to do, and @mdo/table-grid supports that. There’s also a base class for ease of use that makes our columns use
display: table-cell; and more.
Now comes the really fun part. With
table-layout: fixed;, we can drop half our grid classes. Fixed table layouts render equal-width columns when no other width is set.
With or without those extra classes, table grids are easily nestable. Just place a
.grid with any combination of columns within an existing
div.grid-padded to add gutters between columns. Works on any column, even the
width-less base class.
.grid-padded applies negative horizontal margins to account for the gutters. Tables that are 100% wide cannot have negative horizontal margins directly applied to them, so we must use a wrapper.
.grid-align-middle class to the
.grid and voilà. Requires the use of
table based elements within a column.
.grid-reverse class to the
.grid table and you’ll have reversed columns. In the example below, Column 1 is first in the markup, but appears last when rendered. And because our table grid is responsive, they’re stacked in order on mobile, too.
Head to GitHub to download @mdo/table-grid (includes source Sass and docs).