index.md

layout
default

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.

<iframe src="http://ghbtns.com/github-btn.html?user=mdo&repo=table-grid&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="130px" height="30px"></iframe>

---

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

{% highlight html %}

8

4

{% endhighlight %}

---

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

{% highlight html %}

Column

Column

Column

{% endhighlight %}

---

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

{% highlight html %}

8

Column

Column

4

{% endhighlight %}

---

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

{% highlight html %}

Column

Column

{% endhighlight %}

---

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.

{% highlight html %}

{% endhighlight %}

---

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

{% highlight html %}

Column 1

Column 2

{% endhighlight %}

---

Download

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

---

Shoutout tables.

<3