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 Gotcha's

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.

1. 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)

2. Make a div and give it a class of .griddle. This will act as our CSS Grid container.

3. Next, let’s add some pieces of a McGriddle into the mix. Add divs inside of the .griddle with the classes .cake .top, .fillings and .cake .bottom

4. Inside of the .fillings class let’s add our fillings! We want to add 3 divs with the classes .cheese .sausage and ..egg accordingly. Great! Your markup should look like this:

   

5. Now let’s make the grid! Hop over to writing some SCSS and give the griddle a height and display. Let’s add: height: 100vh; and display: grid

6. 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 fr unit. 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 .griddle selector, let’s add the rule: grid-template-rows: 100px 1fr 100px;. What’s happening in the background, looks something like this:

   

7. Let’s slice it up vertically! Same concept here. Let’s have 120px gaps on either side and a variable middle. In the .griddle class, 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:

   

8. Now that we have our grid layout, we just want to define our pieces. Let’s start with the cakes. Create a .cake selector and add the rule background-color: #EDCF9F;

9. 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;

   

10. 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!

    

11. 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 #F6A623 on it, and bam! You’ve got yourself a CSS McGriddle layout.

    

12. Feel free to add the cheese, sausage, and eggs as you see fit!

Check out our CSS McGriddle here:

Check out our McGriddle

What's next?

---