Intro to Foundation | Lesson #160
Gettin’ Griddy With It! Your First Taste of the CSS Grid.
Learn the basics of CSS Gris while building a tasty layout.
If you’ve been keeping your ear on the the happenings of the web, you may have heard some rumblings of something called a CSS Grid. If not, that’s cool too, because that’s what this lesson is all about!
So.. Why is there something called CSS Grid?
Before we get too technical, let’s have a brief history lesson. When and why is this thing even a thing? It’s been a running joke for some time, but positioning things in CSS sucks.
This is one of the many problems that Foundation solves, with it's flexible grid system. Let’s rewind all the way back to 2011. The folks over at W3C drafted a spec regarding a solution to make positioning things better using just CSS. IE10, IE11, and Edge all support this spec for the CSS Grid. However, as is the web, things have changed. Rules have been changed, renamed, and removed to give us the final spec of the CSS Grid that’s hit browsers this month!
What is it?
In the most basic terms, the CSS Grid is a new set of rules entirely in CSS that help layout webpages.
The biggest gotcha currently is browser support - there’s not a lot currently. Since this is a newer standard, we’ll start seeing updates and newer versions of browsers from here on out, but here are the common browsers that support the CSS Grid:
- Firefox 52+ (Out Now!)
- Chrome 57+ (Out Now!)
- IE 10 & 11 (Partial Support)
- Edge 14+ (Partial Support)
- Safari 10.1 (Developer Version)
- Opera 44 (Developer Version)
Note: IE 10 & 11 and Edge have partial support based on an early spec of the CSS grid which has partial support with the `-ms-` prefix. For a detailed list of what’s all supported in IE and Edge, check it out here.
How do I make my grid?
Let’s walk through our first CSS Grid layout… actually let’s make a McGriddle layout.
Download a Compatible Browser:
Download/Update to Firefox 52 or Chrome 57 (Check out which version you have under the “About Google Chrome” menu item)
Make a div and give it a class of
.griddle. This will act as our CSS Grid container.
Next, let’s add some pieces of a McGriddle into the mix. Add divs inside of the
.griddlewith the classes
Inside of the
.fillingsclass let’s add our fillings! We want to add 3 divs with the classes
..eggaccordingly. Great! Your markup should look like this:
Now let’s make the grid! Hop over to writing some SCSS and give the griddle a height and display. Let’s add:
So now we want to prep our grid to handle all of the rows and columns. This takes a little foresight, but let’s break it down. The way we want our McGriddle to behave is to keep our cake-buns stuck to the top and bottom of our viewport, while the fillings stay in the center and widen depending on our window’s width. We’ll be using two properties, grid-template-rows and grid-template-columns. These basically lay the number of rows and columns for our grid. One nice trick is adding the “fraction” unit in this as well - designated by the
frunit. Let’s run through our grid-template-rows first. We know that we have 2 fixed cake buns and an ever-growing fillings area. Let’s make the space for the cakes 100px tall and the filling to take up whatever fraction of the page is left. In our
.griddleselector, let’s add the rule:
grid-template-rows: 100px 1fr 100px;. What’s happening in the background, looks something like this:
Let’s slice it up vertically! Same concept here. Let’s have 120px gaps on either side and a variable middle. In the
.griddleclass, let’s add this rule:
grid-template-columns: 120px 1fr 120px;This will set up our grid to look something like this:
Putting it all together looks something like this:
Now that we have our grid layout, we just want to define our pieces. Let’s start with the cakes. Create a
.cakeselector and add the rule
We’ll also want to declare the start and end of the cake (basically how wide are these buns?) with the grid-column-start and grid-column-end properties. As a trick, we want to take up the start of column 1 all the way past column 3, to the start of column 4 (even if it’s imaginary). So let’s add these lines to achieve this:
grid-column-start: 1; grid-column-end: 4;
Now that we have our cakes 100% wide, let’s make sure they’re locked in the right spot. While it they make look like it, we want to lock-in the placement of the buns. We’ll use the very similar grid-row-start and grid-row-end properties. Same idea applies here - we want to define the end of the rows all the way through to the beginning of the next row (imaginary or not). So for the top bun we’ll add the rules:
grid-row-start: 1; grid-row-end: 2;and for the bottom bun we want to add the rules
grid-row-start: 3; grid-row-end:4;Now your buns are lookin’ good!
Now let’s get the fillings centered and ready. Just add these lines here:
grid-row-start: 2; grid-row-end:3; grid-column-start: 2; grid-column-end: 3;slap a background color of
#F6A623on it, and bam! You’ve got yourself a CSS McGriddle layout.
Feel free to add the cheese, sausage, and eggs as you see fit!
Check out our CSS McGriddle here:
So as cheesy (heh) as this pun is, we’ve done a lot pretty cool things with the CSS Grid. We were able to quickly create a flexible grid layout where the cake components might be able to extend into a header and footer in a more realistic layout. Since this is a newer spec, we’ll be starting from the ground up and building off the concepts in our next lessons as we explore some more practical layouts. This is just a taste of the CSS McGRIDdle. If you'd like to read more about our experiments with Foundation and CSS Grid, be sure to check out our latest blog post, "Think Beyond the Page."
About the instructor
A code and design ninja, Tim Hartwick is a designer who loves a challenge and enjoys teaching people. Tim has designed apps, websites, and is great at solving problems.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.