@mdo/table-grid

This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables.

Premise

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.


Typical approach

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.

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
7
6
6
8
4
12
<div class="grid">
  <div class="col col-8">8</div>
  <div class="col col-4">4</div>
</div>

Table layout

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.

Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Nested

With or without those extra classes, table grids are easily nestable. Just place a .grid with any combination of columns within an existing .col.

8
Column
Column
4
<div class="grid">
  <div class="col col-8">
    8
    <div class="grid">
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
  <div class="col col-4">4</div>
</div>

Grids with gutters

Wrap the .grid with div.grid-padded to add gutters between columns. Works on any column, even the width-less base class.

The wrapping .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.

Column
Column
Column
Column
Column
8
4
<div class="grid-padded">
  <div class="grid">
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Vertically center content

Add the .grid-align-middle class to the .grid and voilà. Requires the use of inline, inline-block, or table based elements within a column.

Free-form text wraps while remaining vertically centered.
Nested columns center, too.
Column
Column
A `div` with `inline-block` works great, too.
<div class="grid-padded">
  <div class="grid grid-align-middle">
    <!-- Columns -->
  </div>
</div>

Reverse column sorting

Add the .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.

Column 1
Column 2
<div class="grid-padded">
  <div class="grid grid-reverse">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

Download

Head to GitHub to download @mdo/table-grid (includes source Sass and docs).


Shoutout tables.

<3