CSS Grid - First Look

March 06, 2017

You might say that I've been living under a rock for a bit. With all my focus on design systems, and more recently React and Typescript, I've been completely ignoring the elephant in the room...the inevitable arrival of CSS grid and how they will change the way that we write out layouts! In this post I'm going to be sharing my thoughts as I take a first look at this incredible new layout tool, and hopefully it'll intice you to take the plunge yourself.

So what's the first thing we do when needing to learn about a new web technology? We Google it of course.

So in the spirit of let me google that for you, here are the first 3 links you'll find when you look up CSS Grid.

First 3 Links

Not a bad starting point! A definitive tutorial from our friends at CSS Tricks, which will inevitably replace their Flexbox Guide as my most frequented CSS resource. A developer friendly specification from the always reliable Mozilla Developer Network, and the spec itself from none other than the W3C.

These display quality search results is what makes being a developer so much easier these days.

I'm also glad to not see any W3schools in the top 3, though they do have listing at #5 that links to some article about CSS float based grids. ¯\(ツ)/¯

A First Look at the Grid Spec

First thing I needed to do was make sure that I have a browser that supports CSS Grid layout. [Edited March 16th 2017] Grid has shipped in Chrome and Firefox!

Once I had a supported browser, I could now view all the grid examples I ran across at Rachel Andrew's great grid site called Grid By Example.

Our First Grid Example

I wanted to start this post off by looking at Rachel's first examples, and taking note of everything I learned.

See the Pen Grid by Example 1: Defining a Grid by rachelandrew (@rachelandrew) on CodePen.

display: grid is nice and consistent with display: flex and will make switching from one display mode to another quite easy.
grid-template-columns: 100px 100px 100px; is one of the longest hyphenations I've seen in CSS, and I'm sure this attribute will take a LONG time to unpack. At least it's very clear as to what it's doing, and adding a 4th value or changing each value to a percentage does exactly what you'd expect.
grid-gap: 10px is the value we've been waiting for! It's a single value that determines the space between all of the grid elements. No more faking this with margins and worrying about nth-child/last-child to remove that trailing margin.

Math Note

If you are looking to change this example from one with 100px fixed column widths, to one where we have 3 equal columns, forget about using fractions. grid-template-columns: 33.33% 33.33% 33.33%; plus a grid-gap will yield a row longer than the parent grid.

See the Pen Grid Gap Adds to Percentage Children by Micah Godbolt (@micahgodbolt) on CodePen.

Solution - The `fr` unit

Fortunately there is a new unit of measurement called flexible length which is a fraction of the free space available. Sort of like flex grow grid-tempmlate-columns: 1fr 1fr 1fr means each column will grow equally to fill up the available space, and you'll have a perfect gallery regardless of the gutter you decide to apply.

See the Pen Grid Gap Works with FR Units by Micah Godbolt (@micahgodbolt) on CodePen.

Wrap it Up

So that's it for tonight. I literally sat down, took my first look at CSS Grid, and shared with you what I'd found. Hope you enjoyed it! I'll try to share a bit more once I dive in further. From the looks of it, I could spent quite a long time on grid-templates alone. See you next time!