Simple Introduction to CSS Grid

CSS grid lets us create layouts with CSS easily.

It’s good for creating responsive layouts, because of in this process, we can group different items together.
We’ll look at how to define a grid layout also make it responsive, in this article.

Defining a Grid Layout

With some HTML and CSS , we can define a grid layout.

If we want to define 4 div’s with one header, one left and right div with an empty space in between it, and one footer, we can do it as follows.

First, we add the HTML:

<div class='container'>  
  <div class='item-a'>  
    A  
  </div>  
  <div class='item-b'>  
    B  
  </div>  
  <div class='item-c'>  
    C  
  </div>  
  <div class='item-d'>  
    D  
  </div>  
</div>

Then we add the CSS:

.item-a {  
  grid-area: header;  
  background-color: lightyellow;  
}

.item-b {  
  grid-area: main;  
  background-color: lightgreen;  
}

.item-c {  
  grid-area: sidebar;  
  background-color: lightblue;  
}

.item-d {  
  grid-area: footer;  
  background-color: pink;  
}

.container {  
  display: grid;  
  grid-template-columns: 24vw 25vw 25vw 24vw;  
  grid-template-rows: auto;  
  grid-template-areas:  
    "header header header header"  
    "main main . sidebar"  
    "footer footer footer footer";  
}

The CSS has following parts.

First, we look at the container class. This code is the most important part of the grid.

We have display: grid; which designates that the div with the container class has a grid layout.

Then with the grid-template-columns, we define the grid columns , which we set the value to 24vw 25vw 25vw 24vw .

That means, we have 4 columns with the leftmost and rightmost columns having 24vw and the one in between having 25vw .

Then we have grid-template-rows: auto; .
We leave it as auto since we aren’t concerned with the height of the rows.

To define how the grid is shared between the components inside the div with the container class, we write:

grid-template-areas:  
    "header header header header"  
    "main main . sidebar"  
    "footer footer footer footer";

We have the first row all fille with the header area in the first row.

Then we have the main area fill the 2 leftmost columns, in the new row. A dot for an empty space, and the sidebar area for the rightmost column.

Then we have the footer area fill the whole row, in the bottom row.

Then we can designate the areas with the item classes as follows:

.item-a {  
  grid-area: header;  
  background-color: lightyellow;  
}

.item-b {  
  grid-area: main;  
  background-color: lightgreen;  
}

.item-c {  
  grid-area: sidebar;  
  background-color: lightblue;  
}

.item-d {  
  grid-area: footer;  
  background-color: pink;  
}

In the above code, we designated whatever having the item-a class as the header with the grid-area and set the background color.

This means that whatever has the class item-a will be the header that fills the top row.

Then we do the same with the other 3 classes, so whatever has the class item-b will fill the leftmost 2 columns in the second row. The element with the class item-c fills the rightmost column of the second row. The element with the class item-d fills all of the bottom rows.
This is how we define a layout with a grid.

Responsive Layout

We can define a responsive layout and adding a new layout for narrow screens with CSS sectors.

We can define a narrow screen layout that only shows the header, main and footer areas as follows:

.item-a {  
  grid-area: header;  
  background-color: lightyellow;  
}

.item-b {  
  grid-area: main;  
  background-color: lightgreen;  
}

.item-c {  
  grid-area: sidebar;  
  background-color: lightblue;  
}

.item-d {  
  grid-area: footer;  
  background-color: pink;  
}

.container {  
  display: grid;  
  grid-template-rows: auto;  
}

@media only screen and (min-width: 751px) {  
  .container {  
    grid-template-columns: 24vw 25vw 25vw 24vw;  
    grid-template-areas:  
      "header header header header"  
      "main main . sidebar"  
      "footer footer footer footer";  
  }  
}

@media only screen and (max-width: 750px) {  
  .item-c {  
    display: none;  
  }

  .container {  
    grid-template-columns: 90vw;  
    grid-template-rows: auto;  
    grid-template-areas:  
      "header"  
      "main"  
      "footer";  
  }  
}

When the screen width is 750px or less , all we did is hide anything with class item-c . Otherwise, we keep the same layout as before.
Otherwise, to prevent duplication, we just move the code around a bit .
Then when our screen is narrow, we get

Conclusion

To making layouts is easier than ever, we use the CSS grid.

First, to make it a container for a grid, we set the container div to display: grid .

Then we can define layouts with the grid-template-columns to define the columns, grid-template-rows to define the rows. This will form a grid.

Then to define our layout one row at a time, we set the grid-template-areas attribute.
Then by using CSS media queries, we can extend this to be responsive and then defining alternative layouts for different screen sizes.