CSS Grid

What Is CSS Grid?

CSS Grid is a layout module that lets you arrange elements in rows and columns. Unlike Flexbox, which is mainly one-dimensional, Grid is designed for two-dimensional layouts where you need control over both width and height structure.

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

When you apply display: grid; to a parent element, its direct children become grid items.

Why CSS Grid Is Important

• Creates clean row and column layouts.
• Builds full page layouts without float hacks.
• Supports responsive card grids and image galleries.
• Controls both horizontal and vertical placement.
• Works well with the fr unit, repeat(), and minmax().
• Reduces layout complexity in dashboards and application UIs.
• Pairs well with Flexbox for modern responsive design.

CSS Grid Cheatsheet

The following table explains the most common CSS Grid properties and functions.

Grid Container and Grid Items

A grid container is the parent element with display: grid;. Its direct children become grid items.

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

Grid container properties control the grid structure, while grid item properties control placement inside that structure.

grid-template-columns

The grid-template-columns property defines the column structure of a grid.

.three-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

This creates three equal columns.

grid-template-rows

The grid-template-rows property defines the row structure of a grid.

.page-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

This pattern works well for a header, main content area, and footer.

The fr Unit in CSS Grid

The fr unit represents a fraction of available space inside the grid container.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

In this example, the second column gets twice as much available space as the first column.

CSS Grid repeat()

The repeat() function reduces duplicate code when defining repeated tracks.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

This creates four equal columns using a shorter syntax.

CSS Grid minmax()

The minmax() function sets a minimum and maximum size for a grid track.

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

Each column is at least 200px wide and can grow up to one fraction of available space.

Responsive Grid with auto-fit and minmax()

One of the most useful CSS Grid patterns is responsive cards without many media queries.

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

This automatically creates as many columns as can fit, while each item keeps a minimum width.

auto-fit vs auto-fill

Both auto-fit and auto-fill create responsive columns, but they behave differently when extra space is available.

gap, row-gap, and column-gap

The gap property controls spacing between grid rows and columns.

.grid {
  display: grid;
  gap: 1rem 2rem;
}

The first value controls row gap, and the second value controls column gap.

grid-column and grid-row

Grid items can span columns or rows using grid-column and grid-row.

.featured-card {
  grid-column: span 2;
}

.tall-card {
  grid-row: span 2;
}

This is useful for featured cards, dashboards, image galleries, and magazine-style layouts.

grid-template-areas

grid-template-areas allows you to create named layout regions.

.page-grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

Named areas make page layouts easier to read and maintain.

CSS Grid Page Layout Example

The following example creates a common website layout with header, sidebar, main content, and footer.

<div class="page-grid">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main content</main>
  <footer class="footer">Footer</footer>
</div>

.page-grid {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  gap: 1rem;
}

@media (min-width: 768px) {
  .page-grid {
    grid-template-columns: 260px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

CSS Grid vs Flexbox

CSS Grid and Flexbox are both modern layout tools, but they solve different problems.

A common rule: use Grid for page structure and Flexbox for alignment inside components.

CSS Grid and Accessibility

CSS Grid changes visual layout, but keyboard navigation and screen readers still follow the HTML source order.

• Keep HTML source order logical.
• Avoid visual reordering that confuses users.
• Use semantic HTML elements like header, nav, main, aside, and footer.
• Make sure responsive grid layouts remain readable.
• Keep focus states visible inside grid-based components.

CSS Grid and SEO

CSS Grid does not directly affect rankings, but it improves mobile usability, content presentation, readability, accessibility, and user experience.

• Responsive grids improve mobile-friendly design.
• Clear layouts help users scan content faster.
• Semantic HTML with Grid keeps page structure meaningful.
• Better layout quality supports engagement and trust.
• Maintainable layouts make content updates easier.

Common CSS Grid Mistakes

• Using Grid for simple one-line alignment where Flexbox is easier.
• Forgetting that only direct children become grid items.
• Creating fixed columns that break on mobile.
• Using visual reordering in a way that hurts accessibility.
• Forgetting gap and using margin hacks instead.
• Not testing responsive grids on small screens.
• Using too many hard-coded widths instead of fr, minmax(), and auto-fit.

CSS Grid Best Practices

• Use Grid for two-dimensional layouts.
• Use Flexbox for one-dimensional alignment.
• Use gap for clean spacing.
• Use fr units for flexible columns.
• Use repeat() to reduce repeated code.
• Use minmax() and auto-fit for responsive grids.
• Use named grid areas for readable page layouts.
• Keep source order logical for accessibility.
• Use semantic HTML with grid layouts.
• Debug layouts using browser Grid inspector tools.

Key Takeaways

• CSS Grid is a two-dimensional layout system.
• display: grid creates a grid container.
• Direct children of a grid container become grid items.
• grid-template-columns defines columns.
• grid-template-rows defines rows.
• gap creates spacing between grid tracks.
• fr, repeat(), minmax(), and auto-fit are key for responsive grids.
• Use Grid for page layouts and Flexbox for component alignment.