What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. While Flexbox is great for one-dimensional layouts (a row OR a column), Grid excels at creating complex page layouts with rows AND columns.

CSS

.container {
  display: grid;
}

Grid Container and Grid Items

Grid container: The parent element with display: grid
Grid items: The direct children of the grid container

HTML

<div class="grid-container">  <!-- Grid container -->
  <div class="item">1</div>   <!-- Grid item -->
  <div class="item">2</div>   <!-- Grid item -->
  <div class="item">3</div>   <!-- Grid item -->
  <div class="item">4</div>   <!-- Grid item -->
</div>

Defining Columns

Use grid-template-columns to define the number and size of columns:

CSS

/* Three equal columns */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Two columns: fixed sidebar + fluid main */
.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
}

/* Four columns with different sizes */
.mixed {
  display: grid;
  grid-template-columns: 100px 2fr 1fr 150px;
}

The fr Unit

fr (fraction) is a unit specific to CSS Grid. It represents a fraction of the available space:

CSS

/* Three equal columns (each gets 1/3 of space) */
grid-template-columns: 1fr 1fr 1fr;

/* First column gets twice the space */
grid-template-columns: 2fr 1fr 1fr;

/* Mix fr with fixed units */
grid-template-columns: 300px 1fr;
/* Sidebar: 300px, Main: remaining space */

Defining Rows

Use grid-template-rows to define row sizes:

CSS

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  /* Header: auto, Content: fills remaining, Footer: auto */
}

The repeat() Function

Simplify repetitive column/row definitions:

CSS

/* Instead of: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);

/* Repeating pattern */
grid-template-columns: repeat(3, 1fr 2fr);
/* Results in: 1fr 2fr 1fr 2fr 1fr 2fr */

/* 12-column grid */
grid-template-columns: repeat(12, 1fr);

Grid Gap

Add space between grid items:

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;            /* Equal row and column gap */
}

/* Different row and column gaps */
.grid {
  row-gap: 2rem;
  column-gap: 1rem;
}

/* Shorthand: row-gap column-gap */
.grid {
  gap: 2rem 1rem;
}

Placing Items on the Grid

Automatic Placement

By default, grid items fill cells left-to-right, top-to-bottom. You can control this with grid-auto-flow:

CSS

.grid { grid-auto-flow: row; }    /* Fill by row (default) */
.grid { grid-auto-flow: column; } /* Fill by column */
.grid { grid-auto-flow: dense; }  /* Fill gaps with smaller items */

Manual Placement with Line Numbers

Grid lines are numbered starting at 1. Use them to place items:

CSS

.header {
  grid-column: 1 / -1;  /* Span all columns (1 to last) */
}

.sidebar {
  grid-column: 1 / 2;   /* Column line 1 to 2 */
  grid-row: 2 / 4;       /* Row line 2 to 4 (spans 2 rows) */
}

.main {
  grid-column: 2 / 4;   /* Column line 2 to 4 */
}

Spanning Multiple Cells

CSS

/* Span by line numbers */
.wide { grid-column: 1 / 3; }     /* Spans 2 columns */

/* Span by count */
.wide { grid-column: span 2; }     /* Spans 2 columns from current position */
.tall { grid-row: span 3; }        /* Spans 3 rows */

/* Full width */
.full { grid-column: 1 / -1; }     /* -1 = last line */

grid-template-areas

Name areas of your grid for intuitive layouts:

CSS

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

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

Use a . (dot) for empty cells:

CSS

grid-template-areas:
  "header header header"
  "sidebar main ."
  "footer footer footer";

Responsive Grid with auto-fill and auto-fit

auto-fill

Creates as many columns as will fit, even if some are empty:

CSS

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

auto-fit

Same as auto-fill, but collapses empty tracks so items stretch:

CSS

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

This single line creates a fully responsive grid that automatically adjusts the number of columns based on available space.

The minmax() Function

Sets a minimum and maximum size for grid tracks:

CSS

/* Columns: at least 200px, at most 1fr */
grid-template-columns: repeat(3, minmax(200px, 1fr));

/* Rows: at least 100px, grow with content */
grid-template-rows: minmax(100px, auto);

Grid Alignment

Aligning All Items

CSS

.grid {
  justify-items: center;  /* Horizontal alignment of items in cells */
  align-items: center;    /* Vertical alignment of items in cells */
}

Aligning the Grid Itself

CSS

.grid {
  justify-content: center;   /* Horizontal alignment of entire grid */
  align-content: center;     /* Vertical alignment of entire grid */
}

Aligning Individual Items

CSS

.special-item {
  justify-self: end;    /* Horizontal alignment of this item */
  align-self: center;   /* Vertical alignment of this item */
}

Common Grid Patterns

Responsive Card Grid

CSS

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

Full Page Layout

CSS

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

Dashboard Grid

CSS

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

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 2;
}

Summary

CSS Grid is the most powerful layout tool in CSS, designed for two-dimensional layouts. Use grid-template-columns and grid-template-rows to define the structure, fr units for flexible sizing, grid-template-areas for named layouts, and auto-fit with minmax() for responsive grids. Grid is ideal for page layouts, dashboards, card grids, and any layout requiring precise row and column control.