Create a responsive grid layout template in CSS

Last Updated on Dec 18, 2023

In CSS frameworks such as Bootstrap and Tailwind, there are pre-made classes that we can use to create a grid layout. In my opinion, it is one of the most useful classes in CSS frameworks because we can easily create a responsive layout without having to touch CSS.

So in this article, we will attempt to create a responsive grid layout template in CSS that we can use in any of our HTML.

Without further delay, let's get into it.

Create the neccessary files

Before we write our code, let's create the following files: index.html and style.css.

Create the HTML

Type the following code in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create a grid layout template in CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="row">
      <div class="col-4 item">Column 1</div>
      <div class="col-4 item">Column 2</div>
      <div class="col-4 item">Column 3</div>
      <div class="col-4 item">Column 4</div>
      <div class="col-4 item">Column 5</div>
      <div class="col-4 item">Column 6</div>
      <div class="col-4 item">Column 7</div>
      <div class="col-4 item">Column 8</div>
      <div class="col-4 item">Column 9</div>
      <div class="col-4 item">Column 10</div>
      <div class="col-4 item">Column 11</div>
      <div class="col-4 item">Column 12</div>
    </div>
  </body>
</html>

In the code above, our grid starts with the container that has a row class. Then, all its children can have classes col, col-1 to col-12, col-xs-1 to col-xs-12, col-sm-1 to col-sm-12, and col-lg-1 to col-lg-12.

The grid that we will create contains 12 columns, so the number included in classes represents how many columns it will cover. For example, if we use col-4, it will cover four columns. Take note that col works the same as col-12.

Unlike Bootstrap or Tailwind, we will use a desktop-first approach when creating our grid. So col-1 to col-12 will be applied to extra-large screens, while col-xs-1 to col-xs-12, col-sm-1 to col-sm-12, and col-lg-1 to col-lg-12 will be applied to extra-small, small, and large screen devices, respectively.

The item class is just there to make it look good.

Create the grid layout template in CSS

Type the following code in style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.row {
  display: grid;
  grid-template-columns: repeat(12, auto);
}
.col, .col-12, 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  grid-column: auto / span 12;
}
.col-1 {
  grid-column: auto / span 1;
}
.col-2 {
  grid-column: auto / span 2;
}
.col-3 {
  grid-column: auto / span 3;
}
.col-4 {
  grid-column: auto / span 4;
}
.col-5 {
  grid-column: auto / span 5;
}
.col-6 {
  grid-column: auto / span 6;
}
.col-7 {
  grid-column: auto / span 7;
}
.col-8 {
  grid-column: auto / span 8;
}
.col-9 {
  grid-column: auto / span 9;
}
.col-10 {
  grid-column: auto / span 10;
}
.col-11 {
  grid-column: auto / span 11;
}
@media screen and (max-width: 1200px) {
  .col-lg-1 {
    grid-column: auto / span 1;
  }
  .col-lg-2 {
    grid-column: auto / span 2;
  }
  .col-lg-3 {
    grid-column: auto / span 3;
  }
  .col-lg-4 {
    grid-column: auto / span 4;
  }
  .col-lg-5 {
    grid-column: auto / span 5;
  }
  .col-lg-6 {
    grid-column: auto / span 6;
  }
  .col-lg-7 {
    grid-column: auto / span 7;
  }
  .col-lg-8 {
    grid-column: auto / span 8;
  }
  .col-lg-9 {
    grid-column: auto / span 9;
  }
  .col-lg-10 {
    grid-column: auto / span 10;
  }
  .col-lg-11 {
    grid-column: auto / span 11;
  }
  .col-lg-12 {
    grid-column: auto / span 12;
  }
}
@media screen and (max-width: 1024px) {
  .col-md-1 {
    grid-column: auto / span 1;
  }
  .col-md-2 {
    grid-column: auto / span 2;
  }
  .col-md-3 {
    grid-column: auto / span 3;
  }
  .col-md-4 {
    grid-column: auto / span 4;
  }
  .col-md-5 {
    grid-column: auto / span 5;
  }
  .col-md-6 {
    grid-column: auto / span 6;
  }
  .col-md-7 {
    grid-column: auto / span 7;
  }
  .col-md-8 {
    grid-column: auto / span 8;
  }
  .col-md-9 {
    grid-column: auto / span 9;
  }
  .col-md-10 {
    grid-column: auto / span 10;
  }
  .col-md-11 {
    grid-column: auto / span 11;
  }
  .col-md-12 {
    grid-column: auto / span 12;
  }
}
@media screen and (max-width: 768px) {
  .col-sm-1 {
    grid-column: auto / span 1;
  }
  .col-sm-2 {
    grid-column: auto / span 2;
  }
  .col-sm-3 {
    grid-column: auto / span 3;
  }
  .col-sm-4 {
    grid-column: auto / span 4;
  }
  .col-sm-5 {
    grid-column: auto / span 5;
  }
  .col-sm-6 {
    grid-column: auto / span 6;
  }
  .col-sm-7 {
    grid-column: auto / span 7;
  }
  .col-sm-8 {
    grid-column: auto / span 8;
  }
  .col-sm-9 {
    grid-column: auto / span 9;
  }
  .col-sm-10 {
    grid-column: auto / span 10;
  }
  .col-sm-11 {
    grid-column: auto / span 11;
  }
  .col-sm-12 {
    grid-column: auto / span 12;
  }
}
@media screen and (max-width: 480px) {
  .col-xs-1 {
    grid-column: auto / span 1;
  }
  .col-xs-2 {
    grid-column: auto / span 2;
  }
  .col-xs-3 {
    grid-column: auto / span 3;
  }
  .col-xs-4 {
    grid-column: auto / span 4;
  }
  .col-xs-5 {
    grid-column: auto / span 5;
  }
  .col-xs-6 {
    grid-column: auto / span 6;
  }
  .col-xs-7 {
    grid-column: auto / span 7;
  }
  .col-xs-8 {
    grid-column: auto / span 8;
  }
  .col-xs-9 {
    grid-column: auto / span 9;
  }
  .col-xs-10 {
    grid-column: auto / span 10;
  }
  .col-xs-11 {
    grid-column: auto / span 11;
  }
  .col-xs-12 {
    grid-column: auto / span 12;
  }
}
.item {
  padding: 14px 16px;
  border: 1px solid hsl(220, 100%, 70%);
  background-color: hsla(220, 100%, 85%, .5);
}

To use grid in CSS, we need to set the display to grid.

Then, in order to create a 12-column layout, we set the grid-template-columns to repeat(12, auto). The grid-template-columns is used to set how many columns the grid will have by defining their track sizes. So, if we set its value to 50px 50px, then it will have 2 columns, each with 50px. If we don't want to specify the size, we can put auto instead. The function repeat() in CSS repeats the sizes that you will set. It takes two parameters: first is how many times it will repeat, and the second is the track size. So 50px 50px can be written as repeat(2, 50px). That is why repeat(12, auto) will create a 12-column layout without specific sizes.

Next, in our grid child, we set the grid-column to their respective value. The grid-column is a shorthand for grid-column-start and grid-column-end; the syntax is as follows: grid-column-start / grid-column-end. The grid-column-start sets the starting position within the grid column, while the grid-column-end sets the ending position. Their value can be a number or name representing the grid line (ex. 1), how many tracks it will span (ex. span 1), or auto.

We set all our grid-column-start to auto since we don't know where it will start in our HTML. Then, we set all our grid-column-end to their respective span values based on their class names. For example, col-4 class is span 4. Lastly, we use a media query to create a class that only targets specific sizes; for instance, inside our @media screen and (max-width: 1200px), we have classes col-lg-1, col-lg-2, etc.

Take note that we can combine classes to create our responsive layout. For example, if we want to create a 2-column layout on wide devices but a 1-column layout on narrow devices, then we can use col-6 col-sm-12.

Summary

In this tutorial, we have created a responsive grid layout template in CSS. We have learned that to use grid in CSS, we have to set the display to grid. We also learned how to create columns by using grid-template-columns. Finally, we have learned how to use grid-column, which is a shorthand for grid-column-start and grid-column-end.

Create a responsive grid layout template in CSS

Create the neccessary files

Create the HTML

Create the grid layout template in CSS

Summary

How to create a responsive two-column layout using Flexbox

How to create responsive blog layout in CSS