CSS Grid Layout Tutorial

Introduction

In this tutorial, I explain how to create a basic website layout using CSS grid. CSS Grid is a two-dimensional grid-based layout system that let you easily arrange your website layout on a grid schema.

You will learn how to setup HTML structure, create classes for your components, prepare necessary CSS styling and prepare simple layout using CSS Grid.

Getting started

To get started you have to define a container element as a grid with display: grid. Set the column and row sizes with grid-template-columns and grid-template-rows. Then place its child elements into the grid with grid-column and grid-row.

As you may see in the paragraph above It is important to understand grids terminology. Usage of CSS grid will be effortless after you understand the grid's attributes.

Grid elements

Grid Container

The element that has applied display: grid. This is a component that should be a parent of all elements we plan to style inside of the grid.

<div class="container">
  <div class="grid-item item1"></div>
  <div class="grid-item item2"></div>
  <div class="grid-item item3"></div>
</div>

Note: In the example above, the element with a class container is the grid container. You can assign display: grid to any class and assign it later to the HTML element.

Grid item

The children to the grid container. An item that is nested directly inside the element with display: grid.

<div class="container">
  <div class="grid-item item1"></div>
  <div class="grid-item item2">
    <div class="grid-sub-item"></div>
  </div>
  <div class="grid-item item3"></div>
</div>

Note: In the example above, elements with class grid-item are the grid items. The div with class="grid-sub-item" is not a grid item.

Grid Cell

This is the smallest part of the grid layout. The number of cells is defined by multiplication of grid rows and grid columns.

LIVE EXAMPLE

Grid Area

This is a part of layout implemented with CSS Grid. A grid area can contain any number of grid cells. This is a space surrounded by four grid lines.

LIVE EXAMPLE

Grid Line

This is a line separating grid cells. There are vertical and horizontal grid lines.

LIVE EXAMPLE

Styling with Grid

Every grid styling needs to contain defined elements.

.grid-container{
display: grid;
grid-template-columns: 1fr 50px 1fr;
grid-gap: 15px;grid-template-areas: "area1 area2 area3 " "area4 area5 area6 " "area7 area8 area9";
}

In the example above we are using all important parts of styling a grid container.

I mentioned display: grid; already. This is the line that enables all-important grid features.

Grid templates are the lines that define the size of defined columns and rows. You have to declare the sizes of your grid elements by defining these elements. You have to plan how many columns there will be in your grid as well as how many rows by declaring each row and column size.

You can use all known sizing units like: px, %, vh, vw but to make the grid responsive there is one more way to set its "fraction" size.

As you may be noticed I styled my columns and rows using the unit fr. 

grid-template-columns: 1fr 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;

This way you can assign all left space to equally distribute it between elements that use fr unit.

When used fr redistribute equally left out space in the grid to elements depending on their share in a sum of all fr used for example if there are used two elements with 1fr they will cover 50/50 the left out space.

The grid-gap styling is straight forward. You can set the size of a gap between your grid cells. It accepts all common sizing units except the fr one.

The most important and trickiest to understand is the grid-template-areas. In this attribute you define how assigned your grid cells are to grid areas.

Every string used in this attribute presents each row of the grid. Every variable used inside that string represents each column.

Note: You need to remember that every single grid area has to be square-shaped, You can not assign the same area to different not connected parts of your grid area.

To properly assign your grid space you have to declare the exactly this much rows as you defined in grid-template-rows using a correct number of strings that each and every one contains the proper amount of variables assigned to the previously declared number of columns in grid-template-columns.

grid-template-areas:"area1 area2 area3 " "area4 area5 area1 " "area6 area1 area7";

Note: THIS EXAMPLE WILL NOT WORK! You can not assign area1 this way.

grid-template-areas: "area area area1 " "area area area2 " "area3 area4 area5";

Note: This is a proper example of a large-area example.

You can also leave the cell empty by adding simple "." in place of a variable in the row string.
grid-template-areas: "area1 . area2 " "area3 area4 . " "area5 . area6";

After setting up template areas just simply add every area variable to the desired class with the attribute grid-area.

.area1 { grid-area: area1 ; }
.area2 { grid-area: area2 ; }
.area3 { grid-area: area3 ; }
.area4 { grid-area: area4 ; }
.area5 { grid-area: area5 ; }
.area6 { grid-area: area6 ; }

Note: The class can be named randomly. Setting the same grid area value and the class name is just a good practice that makes code easier to understand.

This way you can create any grid layout you design.

Right now we discussed how to style your elements but you need to add them to HTML to add styling. Let's talk about that now.

HTML Structure

After we plan how our grid will look like by planning the number and sizes of every element we can create them in HTML.

Defining your grid area require to add at least 1 element with class assigned to a grid cell.

.grid-container {
display: grid;
grid-template-columns: 1fr 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 1px;
grid-template-areas: "area1 . area2 " "area3 area4 . " "area5 . area6";
}

<div class="container">
  <div class="grid-item item1"></div>
  <div class="grid-item item2">
    <div class="grid-sub-item"></div>
  </div>
  <div class="grid-item item3"></div>
</div>

All the variables we used in grid-template-areas that we added to classes need to be assigned to our elements in HTML.

All elements that are created this way will be assigned according to our grid-container styling.
This is that simple!

Examples

Check out our examples of grid usage here:

SNIPPET EXAMPLES

Conclusion

You can design whole sites with it or create parts of your design with this grid property. Elements inside your website can we assigned to display: grid and styled inside with this CSS feature.

I explained only the basics of CSS Grid to arouse curiosity. There are many more features that this display property brings to the table. To understand it in depth you can read this CSS element documentation on one of the dedicated websites.

CSS Grid is an easy way of creating a layout on a grid scheme. After we understand and get used to it the developing process is quick and effective.

Now use this feature and create your own grids!