CSS Grid Not Working? 7 Common Causes and Fixes

Why is CSS Grid Not Displaying Correctly?

CSS Grid appears not to work when the wrong element is the grid container, the items are not direct children, or no column tracks were defined. Applying display: grid alone creates a grid, but its auto-placement may still look like a normal vertical list.

Inspect the parent in browser DevTools. Confirm its computed display is grid, turn on the Grid overlay, and check grid-template-columns, available width, direct children, and item placement.

For responsive cards, repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) avoids overflow while creating as many columns as the container can hold.

CSS Grid is the most powerful layout system in CSS, but it has specific requirements. When grid layouts don't work as expected, it's usually due to missing container setup, incorrect column/row definitions, or misunderstanding how grid items are placed.

Common Causes

Forgetting display: grid on the container
Missing grid-template-columns definition
Applying grid properties to children instead of the container
Incorrect use of fr units with fixed-size items
Grid area names not matching between template and items

Quick Fix (TL;DR)

Immediate Fix: No column definition

/* ❌ Problem "" no column definition */
.container { display: grid; }
/* Items just stack in one column */

/* ✅ Solution "" define columns */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 16px;
}

/* ✅ Responsive grid */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Common Scenarios & Solutions

Failure: Display:grid without columns = 1 column

/* ❌ display:grid without columns = 1 column */
.grid { display: grid; }
/* All items stack vertically */

Correction: 3 equal columns

/* ✅ Define columns explicitly */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  /* or shorthand */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Failure: Area name mismatch

/* ❌ Area name mismatch */
.container {
  grid-template-areas:
    "header header"
    "sidebar main";  /* "main" defined here */
}
.content { grid-area: content; } /* ❌ "content" doesn't exist! */

Grid Not Displaying Correction 2

/* ✅ Names must match exactly */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; } /* ✅ Matches template */

Correction: Auto-fill: creates as many columns as fit

/* ✅ Responsive grid "" no media queries needed */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}
/* auto-fill: creates as many columns as fit
   minmax(250px, 1fr): min 250px, max 1fr */

Correction: Spans 2 columns

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ✅ Span across columns */
.featured { grid-column: span 2; }   /* Spans 2 columns */
.full-width { grid-column: 1 / -1; } /* Spans all columns */

/* ✅ Span rows */
.tall { grid-row: span 2; }

Best Practices to Avoid This Error

Always define grid-template-columns - Without it, grid has only 1 column
Use repeat() for cleaner syntax - repeat(3, 1fr) instead of 1fr 1fr 1fr
Use auto-fill with minmax for responsive grids - No media queries needed
Match grid-area names exactly - Case-sensitive, no spaces
Use gap instead of margins - Cleaner spacing between grid items
Use browser DevTools grid overlay - Visualize grid lines and areas
Use grid-column: 1 / -1 for full-width items - Works regardless of column count

Working Responsive CSS Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 16rem), 1fr)
  );
  gap: 1rem;
}

.card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #cbd5e1;
}

Apply the grid declaration to the common parent of the cards.
min-width: 0 lets long child content shrink instead of forcing overflow.

Fix Grid Items That Still Stack Vertically

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .grid > article {
    padding: 12px;
    background: #e0f2fe;
  }
</style>

<section class="grid">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</section>

Only the direct article children are grid items.
If the container is too narrow, use auto-fit instead of forcing three columns.

Before you move on