CSS Grid Layout — You Need to Know it Now
The CSS Grid is coming to a browser near you and, more likely than not, most browsers will support it natively in the coming months. We’re seeing regular reports about default support for CSS Grid layout as early as March of 2017 from Firefox, Chrome, Edge and maybe others. While no major browser supports CSS Grid layout today (November 2016), features like grid are being rolled out behind flags that, once tested, will be made available in browsers by default with no vendor prefixes necessary. In fact, Grid has been in the works for over five years now behind flags! It’s about time to pull it out of the oven and frost it.
Not only is it coming soon, but we actually have options for polyfilling right now. Keep in mind, however, that it might not take long before those polyfills can be left behind altogether. So what does all of this mean for us?
It’s time to start understanding CSS Grid and implementing it into our sites and applications.
Why CSS Grid?
Flexbox has been wonderful and incredibly useful tool for aligning areas within a section of content. It will continue to be. It is not, however, designed to lay out an entire page on a grid. It falls short there because it was never intended to fill that gap. When Flexbox is paired with CSS Grid layout, it becomes half of a very powerful layout duo.
Unlike tables, floats and home-brewed grid libraries that use dozens of classes to accomplish what should be native in the code, CSS Grid is actual CSS spec specifically for page layout. It’s native. It’s powerful and it requires no smelly mix of DOM and CSS. These are properties you can apply to any class to beautifully and responsively lay out your content and our browsers will just “get it”. It’s gonna be rad.
CSS Grid has been in the works for over five years now in many browsers. Its terminology and functionality are solid. It’s time to learn it for yourself.
Diving In to a Basic Grid
Rather than trying to reinvent the wheel by doing a full tutorial on every property of CSS Grid, I’ll point you to the authoritative guide for CSS Grid in lay man’s terms: https://css-tricks.com/snippets/css/complete-guide-grid/. The guide will give you all of the details on what properties the parent and children can use.
I wanted to give a brief overview of how the Grid works, without getting into too much nitty gritty. That way you can get a feel for how it works conceptually before digging into the details.
display: grid
Let’s start by identifying the two key players: the parent and the child. The parent is the container or wrapper, just like we’ve been using for years. In order for it to lay out a grid, it needs to have a display of either grid, inline-grid or subgrid. More on this in a minute. The most common use we’ll see is to set it to ‘display: grid;’.
.parent {
display: grid;
}Using the grid property
Once the parent has the proper display rule, we set up the rows and columns of the grid in the parent using either their individual rules of grid-template-columns and grid-template-rows or the shorthand rule that combines these two (plus others): grid. Keep in mind that when using shorthand, you need to declare your rows first, and then your columns. They can be declared via any length unit, but also percentages or the new <fr> unit, which represents the percentage of free space available within the grid. A basic example might look like this:
.parent {
display: grid;
grid: 160px 250px 160px 250px auto 300px / 1fr auto 1fr;
}In the above example, the first set of values in the grid rule represent the heights of the rows. The auto value means that it will take up the space it needs to. This is particularly useful for row heights, where the content is allowed to be taller or shorter.
One additional shortcut is to use the repeat syntax for repeated rows or columns. It can be used to repeat multiple values or just one. The syntax is as follows (this is the same code as above, just with the repeat being used):
.parent {
display: grid;
grid: repeat(2, 160px 250px) auto 300px / 1fr auto 1fr;
}For what it’s worth, you may choose to name the lines/borders between your cells so that you can reference them by name. This is not required.
Grid Template Areas
The grid template area is a pretty cool property. It allows you to create a visual syntax of your grid with names for each section if you’d like. For example:
.parent {
display: grid;
grid: repeat(2, 160px 250px) auto 300px / 1fr auto 1fr;
grid-template-areas:
"header header header"
"sidenav main1 sidebar"
"sidenav main1 sidebar"
"sidenav main1 sidebar"
"sidenav main1 sidebar"
"footer footer footer";
}With the grid areas defined, you can now apply them to classes and elements that represent the children within your DOM, like so:
.header {
grid-area: header;
}
nav {
grid-area: sidenav;
}
.contentBody {
grid-area: main1;
}
.footer {
grid-area: footer;
}This tends to be a somewhat restrictive method for placing your content within your grid but if you have a rigid layout structure it works out quite nicely.
Setting Grid Column and Row Values
grid-column and grid-row: Start and Stop
An alternative to the grid-areas is to simply set the start and stop points for both your columns and rows of an element. This gives you the freedom to put rearrange your grid very easily without dealing with grid-area names. To do this you’ll need to learn the grid-column and grid-row properties. Their syntax is as fololws: grid-column: 2 / 5;, where the element starts on the second line (so, the second column) and ends on line 5 (so, the end of the 4th column). If you set neither the grid-column nor grid-row, the default will be one column and one row. Let’s see an example:
.child {
grid-column: 1 / 7;
}If you want an element to start on the second column, on the second row, then span to the 3rd column on the 4th row, the code would look like this:
.child {
grid-column: 2 / 4; /* Column 2 through 3 */
grid-row: 2 / 5; /* Row 2 through 4 */
}Using span to declare how many rows/columns to cover
A third option (and one that I really like) is to use the span attribute to indicate how many columns or rows you’d lie to span. Check it out:
.child {
grid-column: 2 / span 2; /* Column 2 through 3 */
grid-row: 2 / span 3; /* Row 2 through 4 */
}Grid Gaps/Gutters
The last item we’ll cover for our basic grid is the gap that sits between columns and rows. These are called the grid-column-gap and grid-row-gap, respectively. Like defining the grid columns and rows themselves, these can be defined with length units. They can be declared individually or in shorthand form, like so:
grid-gap: 10px 15px; /* Column gap is 10px, row gap is 15px */Other Properties
This has been a basic guide to grid. I’d recommend you check out the documentation at MDN and be sure to read through the full guide by Chris House at his site or on CSS-Tricks. There you can learn about the other properties that you might find useful, such as:
- justify-items
- align-items
- justify-content
- align-content
- grid-auto-columns/rows
- grid-auto-flow
- grid-column-start/end
- grid-row-start/end
- justify-self
- align-self
Demo
I put together a simple demo to show the power of the CSS Grid on a site like LDS.org, where the home page clearly uses a grid already, but could benefit from a native CSS Grid. Here’s what the main content of the page looks like right now:
This is a very simple version of the same content that I created (minus some of the titles) entirely in CSS Grid Layout. Keep in mind, I only went as far as creating a pixel-based, non-responsive grid. Imagine the possibilities when you add breakpoints and fluid units!
Conclusion
That’s it! Now get out there and start learning to lay pages out using the CSS Grid. It’s a powerful and fun tool that’s knocking on our browser’s door for the Spring of 2017. I expect we’ll see many more resources for learning, training and stretching CSS Grid to its limits. Have you seen any awesome examples of CSS Grid that you’d like to share? Be sure to leave a comment below.
