In the previous article, we have seen how to create a grid using two simple properties. In the next examples, we will put into practice the high potentiality of CSS Grid.
Using the Firefox development tool, we analyze the “behind the scene” of the markup that we previously created. To display the grid correctly, we should select the .wrapper and check “Display line numbers”, “Display area names”, and “Extend lines infinitely” .

We are going to use the following layout:

We will refer to the following markup:

<div class="container">
<header class="header">Header</header>
<nav class="navbar">Navbar</nav>
<section class="content">Content</section>
<aside class="sidebar">Lorem ipsum... </aside>
<footer class="footer">Footer</footer>
</div>

Let’s define the grid element and basic styles for all the elements contained in it:

.container {
    display: grid;
    &>* {
        color: #ffffff;
        padding: 10px;
    }
}

We define then a style for rows, paying attention to the five elements nested in the .container: header, navbard, content, sidebar, footer.
The CSS rule would be:

grid-template-rows: 100px 50px 500px 80px;

Values assigned to the rows height would be:

• I valore “100px” = Header
• II valore “50px” = Navbar
• III valore “300px” = Content / Sidebar
• IV valore “80px” = Footer

To be noted: values are 4 and 5 because .content and .sidebar are placed inside the same row.
We could define a height for any element, instead of using the property grid-template-rows. The unfavorable result will be the inability to control the height of each component, using only one line of code.

Let’s define the template for the columns. In this specific case, the quantity makes no difference, and we will then create a template with four columns:

• 3 columns from 1 fraction
• 1 column with a fixed width (300px), where we put the sidebar:

grid-template-columns: repeat(3, 1fr) 300px;

The final SCSS code will be as follows:

.container {
    display: grid;
     
    grid-template-rows: 100px 50px 300px 80px;
    grid-template-columns: repeat(3, 1fr) 300px;
  
    &>* {
        color: #ffffff;
        padding: 10px;
    }
}

Let’s activate the Firefox inspector and look at the grid: we will note that all elements are organized as a sequence inside it. We will refer to row numbers to rightly arrange them.

As we have seen before, we can create a new grid-container with the rule display: grid, and we can create rows and columns with the rules grid-template-rows and grid-template-columns. We obtained a flexible container, precisely as in Flexbox.

Dashed horizontal rows are called row line, vertical ones columns line, the area between two rows is called grid-track: it can be row or column type depending on direction.

The single element between column line and row line is called grid cell, groups of cells are called grid area. All entities inside the grid are named grid item.

In order to let .header occupies all columns in width, we will use the following rule:

.header {
    grid-column: 1 / -1;
}

With this syntax, we define that the .header element should occupy the space between column-line “1” (start) and column-line “-1” (end). Why we wrote “-1” and not “5”? Look at the following screenshot: you can see that the value 5 corresponds to the value -1 (yellow highlighted), if we would increase the number of columns from 4 to 5, the value of the last column line would be 6 (and not 5), whereas the corresponding value (-1) would not change. If we declare the property “grid-column: 1 / -1”, then, we are setting the element .header to occupy the space between the beginning and the end of the grid always and however:

Now we have to define the rules for remaining elements. Please note that .content will occupy the space between the column-line 1 and the column-line-2, but there are no rules set for the sidebar since it will occupy the remaining space:

Now we have to define the rules for remaining elements. Please note that .content will occupy the space between the column-line 1 and the column-line-2, but there are no rules set for the sidebar since it will occupy the remaining space:

.header {
    grid-column: 1 / -1;
    background: coral;
}
.navbar {
    grid-column: 1 / -1;
    background: brown;
}
.content {
    grid-column: 1 / -2;
    background: gray;
}
  
.sidebar {
    background: orangered;
}
  
.footer {
    grid-column: 1 / -1;
    background: brown;
}

If we want to add blocks inside .content, we should transform this last in a grid too:

.content {
    grid-column: 1 / -2;
    background: gray;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 125px;
    gap: 20px;
  
    &__item {
        background: orange;
        color: #ffffff;
        padding: 10px;
    }
}

<section class="content">
<div class="content__item">block 1</div>
<div class="content__item">block 2</div>
<div class="content__item">block 3</div>
<div class="content__item">block 4</div>
    <div class="content__item">block 5</div>
<div class="content__item">block 6</div>
</section>

The result would be:

We used the property:

gap: 20px;

it is a shorthand to define the same spacing between rows and columns. Extended properties are:

row-gap: 20px;
column-gap: 20px;

Next Step

In the next article we will analyze CSS Grid best practices and we will compare it with flexbox.

See you at the next article!