CSS Grid Layout

CSS Grid is a two-dimensional layout system that lets you control rows and columns simultaneously, which makes it the natural choice for page-level layouts, card grids, and any design where content needs to align both horizontally and vertically at once. Where Flexbox excels at distributing items along a single axis, Grid excels at defining an explicit structure that content is placed into.

Like Flexbox, Grid works through a container/item relationship: display: grid on a parent turns it into a grid container, and you define the shape of that grid with grid-template-columns and grid-template-rows, then place children into specific cells or spans.

Why it matters

Grid is the first CSS layout system designed for two dimensions: rows and columns together. Page layouts, image galleries and dashboards that needed frameworks or nested wrappers are a few lines of grid. Knowing when to use grid and when flexbox is one of the questions interviewers ask most.

Defining the Grid

grid-template-columns and grid-template-rows define the size of each column and row as a space-separated list of values, e.g. grid-template-columns: 200px 1fr 1fr; creates a fixed 200px first column followed by two equally sized flexible columns. The fr unit represents a fraction of the remaining available space, making it ideal for flexible grid tracks. gap (shorthand for row-gap and column-gap) adds consistent spacing between grid tracks without needing margins on individual items.

Placing Items with grid-area

Items can be positioned explicitly using grid-column and grid-row (e.g. grid-column: 1 / 3; spans from line 1 to line 3), or more readably by naming areas with grid-template-areas on the container and assigning each child a matching grid-area name. Named areas make complex layouts, like a classic header/sidebar/content/footer page, much easier to read at a glance than raw line numbers.

Grid vs. Flexbox

A practical rule: reach for Grid when you need to control both rows and columns together as a cohesive layout (e.g. a full page or a photo gallery), and reach for Flexbox when you're arranging items along one direction (e.g. a toolbar or a list of tags). The two are not mutually exclusive — a Grid layout commonly contains Flexbox-arranged content inside individual grid cells.

Examples

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

Cards arrange themselves into as many 200px-minimum columns as fit the container width, each column stretching equally to fill any remaining space, and automatically reflowing as the viewport is resized.

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

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

The header and footer stretch across both columns, the sidebar occupies a fixed 200px column on the left, and the main content fills the remaining space between them, all within a full-height page layout.

Exercise

Make main a grid with two columns, the second twice as wide as the first, and a 16px gap. The heading should stretch across both columns, with the paragraph and the button side by side beneath it.

Expected result: a full-width heading, and under it the paragraph in a narrow column and the button in a wide one.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  /* TODO: a two-column grid, 1 part and 2 parts, with a 16px gap */
}

h1 {
  /* TODO: span every column */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}

h1 {
  grid-column: 1 / -1;
}

Quick quiz

Interview questions