Image for post
Image for post

CSS Grid Layout: A Cornucopia of Options

A tutorial designed to whet your appetite

Jeremy Osborn
Jun 1, 2017 · 28 min read

Current layout techniques are a sad buffet

CSS Grid Layout exists because the web page layout techniques we have been using for years have serious limitations. As the web has grown and become more sophisticated, these techniques have become increasingly problematic.

Image for post
Image for post
A.) Header B.) Image C.) Main Content
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Setting the table

The idea of a grid system has been around for a very long time. Think of how hard it would be to print newspapers on a daily basis without guidelines on how to format content and create a hierarchy to distinguish the most important articles from the less important ones.

Image for post
Image for post
An 8 column grid from an important day in US history.
Image for post
Image for post
Image for post
Image for post
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 150px);
grid-template-rows: repeat(3, 150px);
}
.grid {
display: grid;
grid-template-columns: repeat(6, 150px);
grid-template-rows: repeat(3, 150px);
grid-gap: 30px;
}
Image for post
Image for post

A taste of something new

I remember when I first encountered CSS Grid concepts back in 2012, I kept trying to apply my old school CSS skills to this new model and getting in my own way. Finally something clicked, the clouds parted, and I yelled, “I see the light! I SEE IT!”

Gratuitous link that represents my elation after learning Grid Layout basics
<div class="grid">
<div class="grid-item">
<h1>The Bill of Rights</h1>
<h2>Amendment I</h2>
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.</p>
</div>
</div>
.grid-item {
background-color: #d8d8d8;
border: thin black solid;
}
Image for post
Image for post
Image for post
Image for post
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
Image for post
Image for post
grid-template-columns: 1fr 1fr 1fr 1fr;
Image for post
Image for post
grid-template-columns: 2fr 1fr 1fr 1fr;

A small palate cleanser

So you still might be struggling with visualizing this; I know I was originally, so allow me to help. One of the challenges of Grid Layout is that your grid tracks and lines are invisible by default. One of the best methods to visualize your grid overlay is with the Firefox web browser. Using the Inspector (located within the Developer Tools) you can toggle the grid overlay in order to see your layout structure.

Image for post
Image for post
.grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Image for post
Image for post
.grid-item {
background: #D8D8D8;
border: thin black solid;
grid-row: 2;
}
Image for post
Image for post
.grid-item {
background: #d8d8d8;
border: thin black solid;
grid-row: 2;
grid-column: 2;
}
Image for post
Image for post

Grid Layout represents an independent system of rows and columns, and we can position (and reposition) our content within it easily!

To further clarify, our div has a shorter width because it is placed in the second column which is 1fr. This is a feature, not a bug. If we want our div to span columns two and three, we have to instruct it to do so.

.grid-item {
background: #d8d8d8;
border: thin black solid;
grid-row: 2;
grid-column: 2 / span 2;
}
Image for post
Image for post
Image for post
Image for post
.grid {
display: grid;
grid-template-columns: 2fr 150px 150px 1fr;
grid-template-rows: 1fr 1fr;
}
Image for post
Image for post
.grid {
display: grid;
grid-template-columns: 2fr 150px 150px 2fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
grid-row: 1;
grid-column: 2 / span 2;
}
Image for post
Image for post

Digging into the main course

In this section is a working demo of a page that uses three different Grid Layouts, each contained within a different media query. The project I have in mind is a short snippet of content pulled from Wikipedia describing the classic jazz album, “Ella Fitzgerald Sings the Duke Ellington Song Book.” The material I’ll be working with is minimal, consisting of a heading, a few paragraphs, and three photos. To give you sense of what I’ll be working toward, here is the final version of the project (with a responsive layout and all that jazz).

Image for post
Image for post
<div class=”container”>
<div class=”albumtitle”></div>
<img class=”duke”>
<img class=”ella”>
<div class=”album-desc”></div>
<img class=”bandphoto”>
<div class=”credits”></div>
</div>
.container {
display: grid;
grid-gap: 1em;
padding: 1em;
}
Image for post
Image for post
.container {
display: grid;
grid-gap: 1em;
padding: 1em;
grid-template-areas: “head head”
“photo-1 photo-2”
“main main”
“spread spread”
“footer footer”;

}
.albumtitle {
grid-area: head;
}
.duke {
grid-area: photo-1;
}
.ella {
grid-area: photo-2;
}
.album-desc {
grid-area: main;
}
.bandphoto {
grid-area: spread;
}
.credits {
grid-area:footer;
}

Pigging out with media queries

Our existing layout is simple and works well on small screens, but as we expand the browser window, we can see that the layout is in need of some help.

Image for post
Image for post
  1. Reposition our two photos by placing them into the first column.
@media (min-width: 34em) {
.container {
grid-template-areas: “head head head”
“photo-1 main main”
“photo-2 spread spread”
“footer footer footer”;
}
}
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
@media (min-width: 72em) {
.container {
grid-template-areas: “. . head”
“photo-1 photo-2 main”
“. . spread”
“footer footer footer”;
}
  1. In the second row the “photo-1” area starts in column 1, the “photo-2” area starts in column 2, and the “main” area starts in column 3.
  2. In the third row, we start the “spread” area in column 3.
  3. In the last row, we specify the "footer" area across the entire grid.
Image for post
Image for post
Image for post
Image for post
@media (min-width: 72em) {
.container {
grid-template-areas: “. . head”
“photo-1 photo-2 main”
“. . spread”
“footer footer footer”;

grid-template-columns: 18vw 18vw 1fr;

}
Image for post
Image for post
grid-template-areas:
“. . head”
“photo-1 photo-2 main”
“photo-1 photo-2 spread”
“footer footer footer”;
Image for post
Image for post

A bit of dessert

Limiting my demonstrations in this tutorial has been difficult, namely because there’s so much more to explore. I hope you have room for one more new concept. It’s a small but important feature of working with grids and has to do with alignment of individual items within your rows and columns.

Image for post
Image for post
Image for post
Image for post
@media (min-width: 36em) {
.container {
grid-template-areas: “head head head”
“photo-1 main main”
“photo-2 spread spread”
“footer footer footer”;
}

.bandphoto {
align-self: start;
}

}
.bandphoto {
align-self: end;
}
Image for post
Image for post
Image for post
Image for post
.bandphoto {
align-self: center;
}
Image for post
Image for post
Image for post
Image for post
  • Keep your browser at one size and experiment with changing values such as the grid-gap as well the column sizes and layouts
  • Instead of the vw units I used in the final example, try ems, px and fr units to size the columns. Do the same thing for the rows.
  • Add some background-color properties to the various class styles and see what effect it has.

Here comes the bill . . .

We’ve had our small, yet satisfying feast, and believe me when I tell you that there’s a lot left on the buffet table that we haven’t even touched. Let’s cut to the chase — what’s the cost of all this grid goodness? We’ve already hinted at the fact that Grid Layout is extremely new and that older browsers will display your content but with none of the layout. So what exactly is the status in browsers anyway?

Browser Support

Although caniuse.com is a fantastic resource, its support numbers only tell part of the story. Rachel Andrew recently posted this encouraging tweet:

Fallbacks

While browser support for Grid Layout is encouraging, it’s obviously only part of the picture. We still have all of those older browsers out there in the wild, and they will never support Grid Layout. So these days we naturally turn toward fallbacks. Fallbacks are a common part of today’s web development landscape, and web developers have become quite accustomed to using them. I’m not going to go deep into code at this point. Instead I will get straight to the primary solution I hinted at earlier which is CSS Feature Queries.

@supports (display: grid) {
.container {
/* add rules for grid supporting browsers here. */
}
}

Worthwhile examples of Grid Layout in the wild

An obvious question that comes up is what sites are using Grid Layout “for real” today — i.e., in a production website, not just as a technical demo? The examples are few and far between as I write this, but there are a few sites I can recommend.

  • The website for Patterns Day, a web conference, uses Grid Layout to a degree. Jeremy Keith, designer of the site, documented this process on his blog as well, and there are some good takeways to be found there.
  • Eric Meyer’s personal website meyerweb.com uses Grid Layout, and just as importantly, he documented his process with an article, “Practical CSS Grid: Adding Grid to an Existing Design” over at A List Apart.

Additional resources

  • The grid specification is the official source of truth for laying out the rules and syntax for Grid Layout and should be your first stop when you need definitive answers. Over the years these specifications have become a little easier to read, but a lot of people still have trouble sorting through all of the syntax and examples. Luckily for us, Rachel Andrew has a blog series that can help you interpret the specification; here’s Part One, if you’re interested.
  • Speaking of Rachel Andrew, her work is the gold standard for all things grid, and she has created so much content including articles and tutorials that you could spend quite a bit of time with that material before ever looking elsewhere.
  • However, having multiple resources is always a good thing, so be sure to explore the material that Jen Simmons has created, which includes Grid Layout theory and techniques. In addition to her fantastic lab demos, there is also her Learn CSS Grid page which will do a better job than this section of staying up-to-date — so just go there.
  • If you don’t subscribe to the email newsletter, Responsive Design Weekly, you’re missing out on a lot of important news, so get on that. For example, Edition #256 lists a number of resources on both Grid Layout and Flexbox and has lots of links to excellent articles, interactive demos, and more.
  • For comparison, in the old days of CSS layout there was a 3-column liquid layout referred to as the “holy grail,” due to its elusive qualities. This was such a headache that in 2006, it required a 2,000 word article to explain all of its intricacies. Here is the holy grail layout reproduced in about 35 lines of CSS. Go ahead and check it out for yourself.

Gymnasium

Bridging the gap between education and opportunity with…

Thanks to Aquent Gymnasium, Keir Cullen Janey, Justin Gagne, Andrew Miller, Mike Bifulco, Eric A. Meyer, and Sophia Roe

Jeremy Osborn

Written by

Designer, educator, writer. Not always in that order. Academic Director of Aquent Gymnasium.

Gymnasium

Gymnasium

Bridging the gap between education and opportunity with free online courses.

Jeremy Osborn

Written by

Designer, educator, writer. Not always in that order. Academic Director of Aquent Gymnasium.

Gymnasium

Gymnasium

Bridging the gap between education and opportunity with free online courses.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store