Learning CSS Grid layout through real examples

How to understand CSS Grid layout by doing code

Published in

Chegg

8 min readFeb 4, 2020

You may have been creating layouts for your websites for ages. Now, the new guy is in town, CSS Grid. It is a two-dimensional (2D) grid-based layout system that completely changes the way of designing grid-based user interfaces (UI). During the archaic times, tables (<table> tag) were used to achieve 2D layouts, but now, the table is semantic for tabular data and not meant for the layouts. Later, CSS float property superseded the tables for the 2D layouts by developers, since it takes out the elements from the normal flow of the Document Object Model (DOM), and after that, we needed to clear the floating effect. The other guy, CSS Flexbox, is a nice way to implement a layout, but it is largely for one-dimensional systems.

So, how does CSS Grid work? CSS Grid helps you design complex web layouts. It does this by converting an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.

Here, we will learn CSS Grid through layout problems and discuss in-depth solutions. Along the way, I will share some Quick try exercises after each problem. These exercises will have a Codepen link at the bottom of each image. The Codepen link will have HTML and semi-cooked CSS code for you to update the learned CSS properties and to see the effects as you do it. In the end, I will share a complex layout design as a hands-on exercise.

Let’s begin with our first problem.

Problem 1: Create a grid container of 2 rows x 3 columns, and make each item size 100px x 40px with a 5px gap in between them.

A 2x3 matrix of 100px x 40px and 5px gap in-between — 2x3 matrix of 100px x 40px and 5px gap in between

HTML code is:

CSS code is:

Grid container: The line of code below tells the browser to render the element as a grid container.

display: grid; 
      Or
display: inline-grid;

Grid rows and columns: This tells the browser how many rows or columns the grid container has and their sizes.

grid-template-rows: 40px 40px; // 2 rows of 40px each
grid-template-columns: 100px 100px 100px; // 3 columns of 100px each

Grid gap: This defines a gap or a gutter space between the rows and between the columns using the grid-gap property, as shown below.

grid-gap: 5px; // 5px between rows and 5px between columns

Or with expanded syntax for row and column gaps:

grid-gap: 5px 5px; // row col

Or as the two separate properties for row and column gaps:

grid-row-gap: 5px;grid-column-gap: 5px;

Quick try 1: Create a grid container of 2 rows x 5 columns, and make each item size 50px x 40px.

Problem 2: Create a grid container of 2 rows x 5 columns, and make the columns different widths.

HTML code: container with 10 items

5 columns of different widths

This CSS snippet creates five columns:

grid-template-columns: auto 50px 10% 2fr 1fr;

Have you noticed four different units are supplied to grid-template-columns?

The first column has auto width, which means it is as wide as its content.
The second column is of 50px width.
The third column has 10% width of the container width.
The fourth and fifth columns are 2fr and 1fr, respectively. fr is a new unit, known as a fractional unit. Let’s see this in detail in the next section.

Fractional unit or fr unit

The fr unit is a fraction of the free space available in the grid container.

So, in the above problem, the last two columns have widths 2fr and 1fr, which means the remaining space (after column 1, 2 and 3) is divided into three sections — two are allocated for the fourth column, and one for the fifth.

Quick try 2: Create a grid container of 2 rows x 3 columns, and make each column’s width 10%, 50px and 1fr, respectively.

a grid of 2 rows x 3 cols of different width — Click here for the Codepen

Quick try 3: Create a grid container of 3 rows x 3 columns, and make each column width and row height 3fr, 2fr and 1fr, respectively.

Problem 3: Create 2 rows x 5 columns using repeat function.

You may want to create a grid container with all or some columns or rows of the same size (e.g. each 1fr) or repeated sizes (e.g. 1fr, 2fr, 1fr, 2fr). The solution to this problem is repeat function.

Repeat function syntax

repeat(number_of_times, space_separated_widths)

Let’s create five columns of 50px width using repeat function by updating the CSS code with the below:

grid-template-columns: repeat(5, 50px);

Quick try 4: Create a grid container of 5 columns with the following widths — 1fr, 50px, 1fr, 50px, and 100px.

Hint: Update the above CSS code with the line given below.

grid-template-columns: repeat(2, 1fr 50px) 100px;

Untill now, we have only discussed one item per grid. What if we have one item spanned over multiple grids? Let’s explore this problem with a standard web page layout, which has four components: Header, Sidebar, Content, and Footer.

Problem 4: Create a standard web page layout on a 3x3 grid template.

HTML code web page layout

CSS code web page layout

You can define a template in the container element by referencing the name of the component in each grid, as shown in the code snippet below. Each line with the quotes ("") represents a row, and each value between the quotes ("") represents a grid.

grid-template-areas:“header header header”
                    “sidebar content content”
                    “footer footer footer”;

So, the above code has nine grids, where all three grids of the first row are for the Header component. Similarly, all grids of the last row are for the Footer component. In the middle row, the first grid is for the Sidebar component, and the remaining two grids are for the Content component.

Please note that the names of the components are not CSS class names. You can name these components whatever you want.

After defining grid-template-areas, you have to name the component with the below property.

grid-area: header;

Check out the working code on Codepen.

Empty (.) area reference

In reference to the above problem, let’s suppose you only want to have three components in your web page — Header, Content, and Footer — and want to remove Sidebar, as in the image below. Then, empty (.) area reference is coming to rescue.

Update the CSS code for grid-template-areas of Problem 4 with the code snippet below and remove <div class=”sidebar”>Sidebar</div> from HTML code. Click here for the Codepen.

grid-template-areas:“header header header”
                    “.    content content”
                    “footer footer footer”;

Lines in grid

Hypothetical horizontal and vertical lines that create the grid are referred to as lines.
Lines start with count 1 for the top and left most lines.
These lines can be used to refer to an area in the grid properties.

Problem 5: Let’s try the Problem 4 layout again, but this time using grid lines instead of naming the areas.

Here, we are going to define grid areas without naming them in the container, or in other words, we are not going to use the grid-template-areas property in the container.

So, instead of this, the grid-areas property with grid lines can be used to tell the component which grids it can acquire.

The Header component takes all three grids of the first row. Therefore, grid-area in the class top can be declared as:

grid-area: 1/1/2/4;

The syntax is very similar to the Cartesian coordinate system, which starts with Y-axis:

grid-area: y1 / x1 / y2 / x2;Orgrid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

We can also achieve the same by declaring grid-area using the span property, instead of declaring it with endpoints of the component region.

grid-area: 1/1/span 1/span 3;

The syntax for this is:

grid-area: y1 / x1 / span num_rows / span num_cols;Orgrid-area: horizontal line to start at / vertical line to start at / horizontal span / vertical span;

Shorthand properties relationship for grid-area

Quick try 5: Let’s try a layout on 6x6 grids.

Recap

Here’s the list of properties we discussed in this article:

display: grid | inline-grid;grid-template-rows: row_width row_width ...;grid-template-columns: col_width col_width ...;repeat(number_of_times, space_separated_widths)grid-gap: row_gap col_gap;
Or
grid-row-gap: row_gap;
grid-column-gap: col_gap;grid-template-areas: "header header header"
                     "sidebar content content"
                     "footer footer footer";
grid-area: header;
Or
grid-area: y1 / x1 / y2 / x2;
Or
grid-area: y1 / x1 / span num_rows / span num_cols;

Layout exercise

As promised in the begining, this is your hands-on exercise. Are you ready to give it a try? Recreate the layout below.

If you feel stuck, check out the solution here.

What’s next?

CSS Grid doesn’t end here! We’ll share another article covering advanced CSS Grid topics. Stay tuned, and in the meantime, check out more from Chegg Engineering.