Basics of CSS grid layout

Published in

Labcodes Software Studio

4 min readMay 23, 2017

In this article, we are going to take a look at some concepts and show you the power of this new way to layout complex web pages.

What is the new CSS grid layout?

It’s a new CSS specification from W3C that finally adds a powerful way to create layouts controlling two dimensions. It includes several new CSS properties to let web developers layout the elements in the way they want, specifying where the elements should be, how much space they should occupy and their alignment to optimize the space inside the container.

Basic concepts

Grid container

The container is the wrapper of all content. Its direct children are called grid items. To create a grid container, you just need to add the property display: grid; to your container. Another option is to add the property display: inline-grid; and your container will behave like an inline element.

Grid items

They are the direct children of the Grid container, consisting of the space within four lines, just like a table cell.

Grid lines

They are the vertical and horizontal lines that compose the grid. The following grid has 4 column lines and 3 row lines.

Grid tracks

It’s the space between two grid lines (vertically or horizontally). The following grid has 3 column tracks and 2 row tracks.

Grid area

It’s an area that takes more than one Grid item.

Let’s get our hands dirty!

Now that we already know the basic concepts, let’s write some code to see them in action.

The class container has the property display: grid; to turn it into a Grid container. Since we didn’t specify any columns or rows tracks, we got only 1 column with each Grid item in it.

If you want to see the example working, check it here: http://codepen.io/darknessHO/pen/JWLXeO?editors=1100

To create columns and rows, we will need to use the properties grid-template-columns and grid-template-rows. Use the properties grid-column-gap and grid-row-gap to set the gap between columns and rows respectively or you can use the shorthand grid-gap to specify both sizes.

If you want to see the example working, check it here: http://codepen.io/darknessHO/pen/bqMeKV

We can position the Grid item based on the Grid line using the properties grid-column-start, grid-column-end for columns and grid-row-start, grid-row-end for rows. There are also the shorthands for them, grid-column and grid-row. Take a look at the following example where we get four Grid items from column 1 to 3 and from row 1 to 3, creating a Grid Area.

If you want to see the example working, check it here:

http://codepen.io/darknessHO/pen/GWdqPK?editors=1100

If you want to create a row with flexible items taking the same space or more space in relation to the others, you can use the fraction unit fr, which is a fraction of the available space. In the next example, we can see that the first column has 200px and it’s not flexible, while the middle column is 2fr, which means that the middle column will take the double of the available space in relation to the right column, that has 1fr.

If you want to see the example working, check it here:

http://codepen.io/darknessHO/pen/KWRJwx?editors=1100

With the property grid-template-areas you can create a simple layout by just writing the names of the grid areas where you want to place them. In the following example we defined 5 grid areas, with the property grid-area (header, left-sidebar, article, right-sidebar and footer). Now take a look at the grid-template-areas property and how it is used. You decide which grid area goes in which column and it’s done, it’s almost like a visual editor in your code.