How to Create a Responsive Layout with Grid

One of the best things for a custom web design is a custom-made responsive grid system. Everything is customized, including the number of columns, the size of columns, gutters, and so on.

A grid can be responsive where fixed-sized grid items will shift position according to the viewport size.

In this tutorial, we will show you how to create a responsive grid layout by following the steps described below.

The "auto-fill" and "auto-fit" values allow creating a grid with as many tracks of a specific size as fits the container. In other words, creating a responsive grid layout means that grid items change their position as you resize the browser.

Create HTML

  • Create a <div> element with an id "grid".
  • Create nine <div> elements writing numbers in each of them.
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Add CSS

  • Set the display property to "grid" to display an element as a block-level grid container.
  • Define the gap between the grid in pixels with the grid-gap property.
  • Set grid-template-columns to "repeat(auto-fill, minmax(150px, 1fr))". This property specifies the size (width) of each column in the grid layout. Here, the grid-template-columns set the columns to a minimum size of 150 pixels and 1fr a maximum of the remaining space. The tracks will repeat as many times as needed to fit into the container. The "auto-fill" value makes it repeat for as many tracks as will fit the container.
  • Set the font-size of <div> elements.
  • Set the padding, color, and background of elements.
  • Define where the text should be situated with the text-align property.
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 5px;
}

#grid>div {
  font-size: 30px;
  padding: .5em;
  color: #ffffff;
  background: #1c87c9;
  text-align: center;
}

Here’s the full code of our example.

Example of creating a responsive grid layout by using the "auto-fill" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-gap: 5px;
      }
      #grid > div {
        font-size: 30px;
        padding: .5em;
        color: #ffffff;
        background: #1c87c9;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>

Result

1
2
3
4
5
6
7
8
9

We can create a grid layout with the "auto-fit" value. The difference between "auto-fit" and "auto-fill" is that "auto-fill" fils the row with as many columns as it can fit. In contrast, "auto-fit" fits currently available columns into space by expanding them so that they fill the remaining space.

Example of creating a responsive grid layout by using the "auto-fill" and "auto-fit" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid {
        display: grid;
        grid-gap: 10px;
        border: 2px solid #000000;
        margin: 10px;
      }
      .grid > div {
        font-size: 30px;
        padding: .5em;
        background: gold;
        text-align: center;
      }
      .auto-fill {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }
      .auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
    </style>
  </head>
  <body>
    <h2>Auto-fill</h2>
    <div class="grid auto-fill">
      <div>1</div>
      <div>2</div>
    </div>
    <h2>Auto-fit</h2>
    <div class="grid auto-fit">
      <div>1</div>
      <div>2</div>
    </div>
  </body>
</html>

To make the grid responsive, we will use media queries.

Media queries and Grid work incredibly well together. Media queries tell the grid to have a specific layout at certain device widths.

Resize your browser to see how the grid response.

Example of creating a responsive grid layout by using media queries:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 40px;
      }
      .sidebar {
        grid-area: sidebar;
      }
      .sidebar2 {
        grid-area: sidebar2;
      }
      .content {
        grid-area: content;
      }
      .header {
        grid-area: header;
      }
      .footer {
        grid-area: footer;
      }
      .wrapper {
        background-color: #eeeeee;
        color: #444;
        display: grid;
        grid-gap: 1em;
        grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
      }
      @media only screen and (min-width: 500px) {
        .wrapper {
          grid-template-columns: 20% auto;
          grid-template-areas: "header   header" "sidebar  content" "sidebar2 sidebar2" "footer   footer";
        }
      }
      @media only screen and (min-width: 600px) {
        .wrapper {
          grid-gap: 20px;
          grid-template-columns: 120px auto 120px;
          grid-template-areas: "header  header  header" "sidebar content sidebar2" "footer  footer  footer";
          max-width: 600px;
        }
      }
      .box {
        background-color: #444;
        color: #ffffff;
        border-radius: 5px;
        padding: 10px;
        font-size: 150%;
      }
      .header,
      .footer {
        background-color: #8ebf42;
      }
      .sidebar2 {
        background-color: #ccc;
        color: #444;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box header">Header</div>
      <div class="box sidebar">Sidebar</div>
      <div class="box sidebar2">Sidebar 2</div>
      <div class="box content">
        Content
        <br /> When you resize the browser this column will be quite tall.
      </div>
      <div class="box footer">Footer</div>
    </div>
  </body>
</html>