CssHow-ToBeginner · 4 min read

How to Create Responsive Grid in CSS: Simple Guide

Use CSS display: grid with grid-template-columns set to repeat(auto-fit, minmax()) to create a responsive grid that adjusts columns based on screen size. This method automatically fits as many columns as possible within the container, resizing them between a minimum and maximum width.

📐

Syntax

The main CSS properties to create a responsive grid are:

display: grid; - activates grid layout on the container.
grid-template-columns: repeat(auto-fit, minmax(min, max)); - creates columns that automatically fit the container width, with each column having a minimum and maximum size.
gap: - adds space between grid items.

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

💻

Example

This example shows a responsive grid with boxes that adjust the number of columns based on the screen width. Each box stays at least 150px wide but can grow to fill available space.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive Grid Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
  }
  .grid-item {
    background-color: #4a90e2;
    color: white;
    padding: 1rem;
    text-align: center;
    border-radius: 0.5rem;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Box 1</div>
    <div class="grid-item">Box 2</div>
    <div class="grid-item">Box 3</div>
    <div class="grid-item">Box 4</div>
    <div class="grid-item">Box 5</div>
    <div class="grid-item">Box 6</div>
  </div>
</body>
</html>

Output

A webpage showing six blue boxes arranged in a grid that changes the number of columns as the browser window resizes, with each box at least 150px wide and spaced evenly.

⚠️

Common Pitfalls

Common mistakes when creating responsive grids include:

Using fixed widths instead of minmax(), which breaks responsiveness.
Not setting display: grid; on the container.
Forgetting to add gap for spacing, causing items to stick together.
Using auto-fill instead of auto-fit which can leave empty columns.

css

/* Wrong: fixed width breaks responsiveness */
.container-wrong {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 1rem;
}

/* Right: flexible columns with minmax and auto-fit */
.container-right {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

📊

Quick Reference

Tips for responsive CSS grids:

Use display: grid; to start grid layout.
Use repeat(auto-fit, minmax(min, max)) for flexible columns.
Set a sensible minimum width to keep items readable.
Use gap to add space between items.
Test by resizing the browser to see the grid adapt.

✅

Key Takeaways

Use CSS Grid with repeat(auto-fit, minmax()) for responsive columns.

Set a minimum width in minmax() to keep grid items readable on small screens.

Add gap to create space between grid items for better layout.

Avoid fixed widths to ensure the grid adapts smoothly to different screen sizes.

Test responsiveness by resizing the browser window to see columns adjust automatically.