Working with CSS Grid to Create Responsive Layouts

Creating a responsive, attractive layout is a pretty big deal for a frontend developer and over the years there have been moves and shifts (from tables to flexboxes and bootstrap grids) so ‘frontenders’ like me can design complex, yet beautiful webpages.

Before now, I used bootstraps grids, which is a one-dimensional structure – columns only-  and can only accommodate up to 12 grid cells per column, although it allows for nested grids too. In bootstrap grid, even though ‘row’ is a commonly used class name, it actually does not mean row and content cannot be placed directly into it. It is more like a container for the column. Content is rather placed in the column which is an immediate child of the row.

What is CSS grid?

Come in CSS grid; a more powerful and easy style of creating layouts structures. The most powerful attribute of the CSS grid is its 2-dimensional quality (balancing column and row) and this gives it an edge over bootstrap grid, flexbox and any other method previously used.

While the flexbox and bootstrap grid is still a very much recommended system of creating layouts, CSS grid has more potential, and I am very optimistic there would be more to explore in the future.

The CSS grid is highly flexible, dynamic and attractive. It is also not limited to only 12 cells per screen width. With CSS grids, the headaches of floats, positioning and paddings are over, and it only gets better from there. CSS grid introduces a series of properties that allows us to create grid structures and control the placement and sizing of grid items.

THE CSS GRID

The CSS grid is a two dimensional grid structure made up of rows and columns.

Parts of the grid

Parts of a gird

Even though columns go the vertical direction and rows are the horizontal, CSS grid-column is technically the width of the grid cell while rows are the height.

To define the grid in CSS

display: grid;

In this post, I will explain the parts of the grid labeled above, in addition to some common properties associated with the grid and how you can effectively use the grid to create webpages.

GRID CELLS

A grid-cell is a single unit of the grid. These are the little boxes enclosed by gridlines and tracks.

GRID TRACKS

Grid track is a generic name for a grid-column or grid-row. It is the line that starts and stops rows and columns.

GRID GAPS

Grid gaps are also called gutters.  They are spacing between grid-lines. They can be set to any value.

grid-gap: 5px;

GRID COLUMN

Columns are defined in the stylesheet and are displayed horizontally across the screen. When it is defined, the grid system automatically places each element into the assigned value. Grid-columns are the width of the cells.

Here is the HTML for this

<div id = 'container'>
         <div class = 'box1'>Div 1</div>
         <div class = 'box2'>Div 2</div>
         <div class = 'box3'>Div 3</div>
         <div class = 'box4'>Div 4</div>
         <div class = 'box5'>Div 5</div>
         <div class = 'box6'>Div 6</div>
         <div class = 'box7'>Div 7</div>
         <div class = 'box8'>Div 8</div>
     </div> 

And here is the CSS

#container {
   display: grid;
     grid-template-columns: 500px 100px 200px 400px;
 }
  
 .box1{
     background: greenyellow;
 }
  
 .box2 {
     background: gold;
 }
  
 .box3 {
     background: burlywood;
 }
  
 .box4{
     background: rgb(175, 155, 104);
 }
 .box5{
     background: rgb(212, 80, 18);
 }
  
 .box6{
     background: rgb(14, 129, 150);
 }
  
 .box7{
     background: rgb(158, 15, 115);
 }
  
 .box8{
     background: rgb(161, 37, 57);
 } 

There are eights divs in the HTML and four specifications of the grid-template-column. Automatically, each element is placed in the column that it is assigned to. The first box took 500px width space, the second a 100px, the third 200px and the fourth 400px. The fifth to eight box repeated the process all over again.

You will notice that there is an undefined space after the fourth div. The measurements do not fill up the container nicely. We will come to that later, but first, let’s look at rows.

GRID ROWS

Grid rows specify the number of rows needed and are basically the height of the grid cells which by default it is determined by the contents of the elements inside it when not specified. If we were to add more contents to the divs in the grid-column above without specifying the row, you will notice the row will gradually adjust to accommodate the content and will take the height of the longer cell, which in this case is div 2.

<div id = 'container'> 
 <div class = 'box1'>Div 1. <br>It's a crazy day to die in the west. It's a crazy day to die in the west. It's a crazy day to die in the west. It's a crazy day to die in the west. It's a crazy day to die in the west.</div>
         <div class = 'box2'>Div 2 <br> Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile. Its a good day to live and smile.</div>
         <div class = 'box3'>Div 3</div>
         <div class = 'box4'>Div 4</div>
         <div class = 'box5'>Div 5</div>
         <div class = 'box6'>Div 6</div>
         <div class = 'box7'>Div 7</div>
         <div class = 'box8'>Div 8</div> 

We can also define grid-rows just the same way we did grid-template-columns.

#container {
   display: grid;
     grid-template-columns: 500px 100px 200px 400px;
     grid-template-rows: 300px 200px 400px 600px;   
 } 

But the behaviors don’t act the same. Grid-template-rows do not display individual height for each of the cells, instead, it takes up the value of the first cell which is 300px and overrides the rest. And when we have content that is more than 300px, it overflows outside the box.

#container {
     display: grid;
     grid-template-columns: 500px 100px 200px 400px;
     grid-auto-rows: 300px auto;   
 } 

Using grid-auto-rows is a better way of defining grid height. And you will notice a drastic change in the grid structure.

What’s even better is using the minmax function

grid-auto-rows: minmax(300px auto);

Minmax is a shorthand way of defining the minimum and maximum height of the row.

grid-auto-rows: minmax(300px auto);

This means that the min height of the row is 300px while the max is flexible. If the content of the row is <= 300px, then nothing changes, but if is > 300px then the row will adjust to accommodate the content.

Grid measurements

Calculating measurements using px is standard practice in the industry, but CSS grid allows for more flexible choices like percentages and fractions.

Earlier, when defining grid-template-column, we noticed that the template-columns were not evenly balanced in the screen. Here I am not talking about the size of the widths, but rather about the positioning.

This can be better defined using either percentages or fractions.

grid-template-columns: 33.3% 33.3% 33.3%;

This divides the screen into four widths of responsive equal sizes which fills up the screen nicely.

grid-template-columns:  66.6% 33.3%;

Here the first column takes up double the size of the second column.

grid-template-columns:  50% 30% 20%;

Columns of varying widths

One of the downsides to using the percentage is that to have a responsive page, the values must add up to 100%

grid-template-columns:  50% 30% 20% 40%;                                     

will create an overflow in the screen and you’ll have to move the scrollbar to the right to view content in the 40% col and that is not responsive at all.

Using fractions

grid-template-columns: 1fr 1fr 1fr 1fr;

What is 1fr?

According to Envatotuts+, 1fr is ‘one piece of however many pieces we are splitting this into’. This means each column/row should take a fraction of the overall grid.  1fr 1fr 1fr 1fr divides the screen into four equal widths, each taking a fraction of the space.

We can also have fractions of varying widths

grid-template-columns:  1fr 2fr 3fr 1fr;

Using fr is the easiest for me because it creates highly responsive grid structure and is very easy to manipulate and control. The number of fr you could use is  also not limited.

Note that you are not limited to using only either fr or px. You could mix them all.

grid-template-columns:  200px 1fr 20%;

the first column is a fixed 200px, the second 1fr is calculated and the third column is a flexible 20% of the grid container.

The repeat function

The repeat function allows us to repeat values x number of times. Instead of writing 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr, we can just do this,

grid-template-columns:  repeat(12, 1fr);

grid-auto-rows: repeat(2, minmax(200px auto));

OR

grid-template-columns:  repeat(3, 33.3%);

We can also specify both column and row using shorthand

grid-template: rows/columns

  grid-template: repeat(2, minmax(200px))/repeat (4, 1fr);

One comment on “Working with CSS Grid to Create Responsive Layouts

Leave a comment

Your email address will not be published. Required fields are marked *