Creating Responsive Layouts with CSS Grid

CSS Grid is a powerful tool for building highly responsive website designs. By combining the display property with CSS media queries, you can redefine your entire layout grid for specific screen sizes.

While Flexbox is excellent for one-dimensional layouts (a single row or a single column), CSS Grid is designed for two-dimensional layouts, giving you complete control over both rows and columns simultaneously.

Establishing the Grid Container

To use CSS Grid, you must define an outer container as a grid container. You do this by applying display: grid; to the parent container. You then define the number and size of the columns using the grid-template-columns property:

The 1fr unit is a special CSS Grid unit meaning "one fraction of the available space". Giving three columns a value of 1fr ensures they are all perfectly equal in width.

Making it Responsive with Media Queries

A layout with two or three columns usually becomes too cramped on smaller screens like tablets and mobile phones. To make the grid responsive, you can use a media query to simply overwrite the grid-template-columns property, reducing the number of columns.

Full Working Example

The approach in this example gives you total layout control at multiple breakpoints. Try viewing this example on a mobile device or resizing your browser to see the layout gracefully step down from three columns, to two columns, to a single column:

<!DOCTYPE html>
<html>
<head>
<title>Responsive Grid Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f8f9fa;
  }
  .grid-container {
    display: grid;
    /* Create a 3-column layout by default */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  .grid-item {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-top: 4px solid #007bff;
  }
  
  /* On tablets or smaller screens, switch to 2 columns */
  @media (max-width: 900px) {
    .grid-container {
      grid-template-columns: 1fr 1fr;
    }
  }

/* On mobile phones, switch to 1 column */
  @media (max-width: 600px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }
</style>
</head>
<body>

<h3>Responsive CSS Grid</h3>
<p>Resize your browser window to see the layout switch from 3 columns, down to 2 columns, and finally to 1 column.</p>

<div class="grid-container">
  <div class="grid-item">
    <h4>Item 1</h4>
    <p>CSS Grid makes laying out elements in two dimensions incredibly straightforward.</p>
  </div>
  <div class="grid-item">
    <h4>Item 2</h4>
    <p>By defining columns using the fractional 'fr' unit, the grid automatically divides the available space.</p>
  </div>
  <div class="grid-item">
    <h4>Item 3</h4>
    <p>Media queries allow us to easily redefine the number of columns at various screen sizes.</p>
  </div>
  <div class="grid-item">
    <h4>Item 4</h4>
    <p>If there are more items than columns, Grid automatically places them on the next row.</p>
  </div>
</div>

</body>
</html>

View Output Full Screen Preview