Last month we launched the redesign of Thomasnet.com — the backbone of the American manufacturing industry (and the company that happens to employ me full-time). A redesign in which we decided to go all-in with CSS Grid.

This is a website that in January alone received 100k+ visitors on Internet Explorer 11 — the main culprit of browsers without CSS Grid support.

From team buy-in to fallbacks, here’s the approach we took at Thomas with the implementation of CSS Grid.

A quick primer on CSS Grid

CSS Grid is a spec that standardizes the approach to layouts on the web — a spec which has been seven years in the making. It’s a HUGE step forward for design on the web.

Web layouts evolve pretty quickly. First we used tables, next, floats and positioning, then inline block made a short appearance, followed by the almighty Flexbox. CSS Grid is the newest incarnation of the W3C trying to solve the problem of creating flexible layouts (whether you believe one exists or not). Either way there’s a new kid on the block, and you should know about it.

There are already a lot of great articles out there explaining in depth what you can do with Grid Layout (I linked to some of them at the bottom of this post), so I’m not here writing an “Intro to CSS Grid Layout,” kind of thing — you can get that by

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items.

This is all handled by the so called explicit and implicit grid.

All code samples in this post are accompanied by images in order to display grid lines and tracks. If you want to tinker with the code yourself, I recommend you download Firefox Nightly because it currently has the best DevTools

With all the excitement around CSS Grid, I haven't seen as much talk about the new fr CSS length unit (here's the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conjunction with our fancy new layout engine because there are a number of benefits when using it; more legible and maintainable code being the primary reasons for making the switch.

To get started, let's take a look at how we'd typically think of building a grid in CSS. In the example below, we're creating a four column grid where each column has an equal width:

To create this grid we need to use grid-template-columns and grid-gap.

Grid-template-columns declare how the columns of a grid will be laid out, it take a series of values separated by spaces, that declare the size of each column; the number of values specified give us the number of columns.

For example, a four column grid of 250px wide columns can be expressed like this:

grid-template-columns: 250px 250px 250px 250px;

That same layout can also be expressed with a handy repeat keyword.

grid-template-columns: repeat(4, 250px);

Grid-gap specifies the size of gutters in grid layout, it can accept one or two values, if you specify two values you are defining both the row and the column’s gutter size.