CSS Grid Layout: The Complete Guide with Visual Examples

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that lets you control both rows and columns simultaneously. While Flexbox handles one dimension at a time, Grid handles both — making it perfect for page-level layouts.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

Defining the Grid

grid-template-columns / grid-template-rows

/* Fixed sizes */
grid-template-columns: 200px 400px 200px;

/* Fractional units (proportional) */
grid-template-columns: 1fr 2fr 1fr;

/* Mixed */
grid-template-columns: 250px 1fr 250px;

/* repeat() */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 250px);

/* auto-fill and auto-fit (responsive!) */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

/* Named lines */
grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];

The fr Unit

fr stands for "fraction of available space". It distributes remaining space after fixed-size tracks:

/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;

/* Sidebar (250px) + content (remaining space) */
grid-template-columns: 250px 1fr;

/* 1:2:1 ratio */
grid-template-columns: 1fr 2fr 1fr;

gap (row-gap / column-gap)

gap: 16px;              /* Equal gap */
gap: 16px 24px;         /* Row gap, column gap */
row-gap: 16px;
column-gap: 24px;

Grid Template Areas

The most readable way to define layouts:

.container {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Responsive with Template Areas

/* Mobile: single column */
@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Placing Items

grid-column / grid-row

.item {
  grid-column: 1 / 3;     /* Start at line 1, end at line 3 */
  grid-column: 1 / span 2; /* Start at 1, span 2 columns */
  grid-column: 1 / -1;     /* Full width (first to last line) */
  grid-row: 2 / 4;         /* Rows 2-3 */
}

Alignment

Container alignment

.container {
  /* Align all items horizontally within their cells */
  justify-items: start | end | center | stretch;

  /* Align all items vertically within their cells */
  align-items: start | end | center | stretch;

  /* Align the entire grid horizontally */
  justify-content: start | end | center | space-between | space-around | space-evenly;

  /* Align the entire grid vertically */
  align-content: start | end | center | space-between | space-around | space-evenly;
}

Item alignment

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Responsive Grid Patterns

Auto-fit Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

This creates a responsive grid that automatically adjusts the number of columns based on available space. No media queries needed.

Holy Grail Layout

.layout {
  display: grid;
  grid-template: 
    "header header header" auto
    "nav    main   aside"  1fr
    "footer footer footer" auto
    / 200px 1fr    200px;
  min-height: 100vh;
  gap: 16px;
}

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

.sidebar { grid-row: 1 / -1; }
.topbar  { grid-column: 2; }
.content { grid-column: 2; overflow-y: auto; }

Grid vs Flexbox

Feature	Grid	Flexbox
Dimensions	2D (rows + columns)	1D (row OR column)
Best for	Page layouts	Component layouts
Content-driven	No (structure-first)	Yes (content-first)
Overlap items	Yes	No
Named areas	Yes	No

Use Grid for: Page layouts, dashboards, card grids, any 2D layout Use Flexbox for: Navigation bars, button groups, centering, any 1D layout

They work great together — Grid for the page, Flexbox for components within grid cells.

Experiment with CSS Grid in our CSS Grid Generator tool, and try Flexbox in our CSS Flexbox Playground.

Related Tools

• CSS Grid Generator — Build grid layouts visually
• CSS Flexbox Playground — Experiment with Flexbox
• CSS Gradient Generator — Create CSS gradients
• CSS Box Shadow Generator — Design box shadows
• CSS Unit Converter — Convert between px, rem, em
• Color Contrast Checker — Check accessibility