Introducing the CSS Grid Layout

Grids are important when creating complex websites. The importance of grids in modern web design is clear from the number of frameworks that implement the grid system to speed up development.

With the introduction of the CSS Grid Layout spec, you will not need to include a separate stylesheet just to use the grid system. Another advantage is that you will not have to rely on properties like inline and float to lay out the elements on a web page. In this tutorial, we will cover the fundamentals of the grid system and create a basic blog layout.

Browser Support

At present, only IE 10+ and Edge support Grid Layout — you cannot use it on a commercial website just yet.

It can be enabled in Chrome through the “Experimental Web Platform features” flag in chrome://flags. You can enable it in Firefox using the layout.css.grid.enabled flag.

Another option is to use a polyfill. A CSS Grid Polyfill does exist! Using the various options above, you can start experimenting and learn as much about the Grid Layout as you can while it is still in its infancy.

Note: Internet Explorer has currently implemented the older version of the spec. Unfortunately, this means that it is not entirely compatible with the latest spec. When going through the examples in this tutorial I suggest you use Chrome or Firefox with appropriate flags enabled.

Grid System Terminology

The CSS grid system is similar to tables when it comes to laying out elements. However, it is much more powerful and flexible. In this section, I will discuss a few terms that you will need to keep in mind when working with grids:

The fr unit: This unit is used to specify a fraction of available space. It is meant to be used with grid-rows and grid-columns. According to the spec —

The distribution of fractional space occurs after all ‘length’ or content-based row and column sizes have reached their maximum.

Lines: Lines define the boundaries of other elements. They run vertically as well as horizontally. In the figure below, there are four vertical and four horizontal lines.

Tracks: Tracks are the space between parallel lines. In the figure below, there are three vertical and three horizontal tracks.

Cells: Cells are the building block of grids. In the figure below, there are nine cells in total.

Areas: An area is a rectangular shape with an arbitrary number of cells. So, a track is an area and so is a cell.

Positioning Elements in a Grid

Let’s begin with the basics. In this section, I will teach you how to position elements at a certain location using grids. To use CSS Grid Layout, you need a parent element and one or more child elements. For the sake of demonstration, I will use the following markup for our grid system:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

After you are done with the markup you need to apply display:grid or display:inline-grid on the parent element along with other styling like this:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

The grid-template-columns and grid-template-rows properties are used to specify the width of various rows and columns. In the above example, I have defined five columns. The 10px columns act as gutters to provide required spacing between elements. The first column is 200px wide. The third column takes up 0.3 parts of the remaining space. Similarly, fifth column takes up 0.7 parts of the remaining space.

Using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 20px row acts as a gutter.

At this point, the elements are packed closely together as evident from the following demo.

See the Pen CSS Grid Layout Demo 1 by SitePoint (@SitePoint) on CodePen.

Observe that element B is in the second column that we were planning on using as a gutter. If you don’t specify the position of child elements inside the grid, the browser puts one element per cell until the first row is completely filled, the rest of the elements then go in the next row. This is the reason that we are left with four spare columns in the second row.

To move elements to a specific cell in the grid you need to specify their position in CSS. Before I explain how to move elements around using grid system, take a look at the following image.

In this example, we will be using “line-based placements”. Line-based placement means that the lines in our grid system will act as guidelines to place and confine elements. Let’s take element B as an example. Horizontally, it starts at column line 3 and ends at column line 4. Along the vertical axis, it is located between the line at row 1 and the line at row 2.

We use grid-column-start to specify the starting vertical line for an element. In this case, it would be set to 3. grid-column-end indicates the ending vertical line for an element. This property would be equal to 4 in this case. Corresponding row values will also be set similarly.

With all of the above in mind, to move element B to the second cell you would use the following CSS:

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

Similarly, to move element F to the sixth cell you would use the following CSS:

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

After these changes in CSS, the elements should be spaced properly like they are in this demo:

See the Pen CSS Grid Layout Demo 2 by SitePoint (@SitePoint) on CodePen.

Creating a Basic Layout

Now it is time to create a basic blog layout. The blog will have a header, a footer, a sidebar and two sections for actual content. Let’s begin with the markup:

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

Keep in mind that the order of elements in markup does not make any difference as to where the elements are positioned on the web page. As long as you do not change the CSS, you can put the footer above the header in the markup and the position of elements on the web page will not change. Of course, I would not recommend it. The point is — your markup will no longer dictate the placement of your elements.

All we have to do now is figure out the value of properties like grid-row-end for various elements. Just like in the last example, we will use a grid diagram to determine the value of all grid properties.

As the above image indicates, the header goes from column line 1 to column line 4 and row line 1 to row line 2. The CSS for this should be as follows:

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

Similarly, “extra content” goes from column line 3 to column line 4 and row line 5 to row line 6. Therefore, the CSS would be:

.extra {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
}

Grid properties of all other elements can also be determined with ease now. Have a look at the CodePen demo and experiment with various grid values to get a better understanding of line-based placement:

See the Pen CSS Grid Layout Demo 3 by SitePoint (@SitePoint) on CodePen.

Conclusion

The CSS grid layout spec allows us to create complex layouts with ease. The CSS we need to write is much simpler and more maintainable. We no longer have to use float or other such properties when creating complex layouts in our designs. Another great advantage is the complete separation of markup and layout. With CSS Grid Layout, the possibilities are endless.

If you have any questions regarding this tutorial, let me know in the comments.