Introduction to CSS Grid

CodingRaul Dronca • May 25, 2017 • 3 minutes READ

CSS Grid is the most powerful layout system available in CSS. It brings a two-dimensional layout tool to the web, with the ability to place items in rows and columns.

The importance of grids in modern web design is high so this new spec solves a lot of age-old problems with laying out elements in-browser.

Before we get started, be aware that this tutorial is not going to be very comprehensive. We’re going to cover the basics. If you want to learn more and go deeper with CSS Grids make sure you check this awesome website by Rachel Andrew or the Mozilla Docs.

If you want to experiment and follow me through this tutorial, I suggest using an online editor such as Codepad or whatever you prefer.

Browser Support

CSS Grid just got released in the latest version of Firefox and the latest version of Chrome. Internet Explorer 10 and 11 support it too, but it’s an old implementation with an outdated syntax.

Basic Grid

First, we need to make sure we have a grid container and inside this grid container all of the child elements, so all of this boxes that are direct children of this grid are going to line up according to the grid. So let’s set up the grid markup:

<div class="grid">
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
</div>

Ok, now let’s target the container that we want to turn into a grid. We’ll add all the properties needed and then I will explain what each property does. For a better understanding, I’ll represent everything with images showing what each line of code does.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid__item {
  width: 100%;
  height: 200px;
  background: skyblue;
}

And this is what we get from this two lines of code:

Now in order to create the row and columns structures we use two different properties.

The first one is grid-template-columns. What we have available here is pretty much everything for a value(px, rem, em). In CSS Grid, there’s a new value/unit that’s introduced called fr. Fr stands for fraction, an fr is taking up the free space, in our case we have four <strong>fr’s that takes up four times the free space.

Another way to write this is by using a shorthand.

 grid-template-columns: repeat(4, 1fr);

The other property is grid-template-rows. Let’s four more elements in our grid and add this new CSS property.

<div class="grid">
 <!-- First Row -->
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>

 <!-- Second Row -->
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 1.5em;
}

And for the gap between them we used what’s called grid-gap, this is the shorthand version, which creates a gap between columns and rows and made them uniform, but if you want to use them separately you can use grid-column-gap and grid-row. This way we created a nice structure.

Check out the live version on Codepad.co.

Be aware that the gap is inside of the column; it does not create margin on the outside of the grid. You can have whatever space you need outside of this grid container.

Conclusion

The CSS Grid layout spec allows us to create complex web design layouts with ease, while writing simpler and more maintainable CSS code. We no longer have to use float or other such properties when creating complex layouts. The possibilities are endless.

We’ll cover more in the next tutorial where we’ll go deeper into what CSS Grids can do. If you have questions regarding this tutorial, let me know in the comments. And don’t forget to check out the live version on Codepad.co.