Setting display: grid turns an element into a grid container, laying out its direct children as grid items across an explicitly defined two-dimensional grid of rows and columns.

Syntax

display: grid;

Deep Dive Course

Unlike flexbox, which is fundamentally a one-dimensional layout model, grid is purpose-built for genuinely two-dimensional layouts, letting you define both rows and columns simultaneously and precisely place items into specific cells, spans, or named areas within that grid. Once an element has display: grid, its direct children automatically become grid items, but without any grid-template-columns or grid-template-rows defined, the grid effectively behaves like a single implicit column by default, which is why display: grid alone is rarely used without also defining the actual grid structure via grid-template-columns/rows.

1Understanding Display: grid

💡

display: grid alone, without also defining grid-template-columns or grid-template-rows, doesn't produce a meaningful multi-column or multi-row layout by itself — you almost always need to pair it with an explicit grid-template definition to actually see grid's real layout power.

editor.html

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

localhost:3000

2Practical Example

Here is a real-world application of Display: grid showing how it is used in production CSS code.

editor.html

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

localhost:3000

3Best Practices

Follow these guidelines when working with Display: grid:

1. Reach for display: grid specifically for genuinely two-dimensional layouts needing both row and column control simultaneously, reserving flexbox for simpler one-dimensional rows or columns

2. Always pair display: grid with an explicit grid-template-columns and/or grid-template-rows definition, since the container alone doesn't establish a meaningful multi-track layout by default

3. Use grid for overall page layout structure, like a header/sidebar/main/footer arrangement, where flexbox alone would require more nested workarounds to achieve the same two-dimensional control

⚠️

Tip: display: grid alone, without also defining grid-template-columns or grid-template-rows, doesn't produce a meaningful multi-column or multi-row layout by itself — you almost always need to pair it with an explicit grid-template definition to actually see grid's real layout power.

editor.html

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

localhost:3000

Examples

Example 01Basic Usage

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

Example 02Advanced Example

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

Best Practices

Reach for display: grid specifically for genuinely two-dimensional layouts needing both row and column control simultaneously, reserving flexbox for simpler one-dimensional rows or columns
Always pair display: grid with an explicit grid-template-columns and/or grid-template-rows definition, since the container alone doesn't establish a meaningful multi-track layout by default
Use grid for overall page layout structure, like a header/sidebar/main/footer arrangement, where flexbox alone would require more nested workarounds to achieve the same two-dimensional control

Interview Question

Why is grid generally considered better suited than flexbox for laying out an entire page's overall structure, like a header, sidebar, main content area, and footer together?▼

Hint: Think about whether that kind of full-page layout is fundamentally a one-dimensional arrangement, a single row or column, or something that genuinely needs to be controlled along two dimensions at once.

A full page layout with a header, sidebar, main content area, and footer isn't fundamentally a single row or a single column of items, it's a genuinely two-dimensional arrangement where the sidebar needs to span a specific set of rows on one side while the main content occupies a different, specific region alongside it, and the header and footer each span the full width across the top and bottom — flexbox, being fundamentally designed around laying items out along one single axis at a time, can approximate this kind of layout but typically requires several nested flex containers, one for the overall vertical stack, another nested one for the horizontal sidebar-plus-main row, to piece together what's really a two-dimensional relationship using multiple one-dimensional building blocks. Grid, by contrast, can express this entire two-dimensional relationship directly and explicitly in a single grid definition, defining rows and columns together and placing each named area exactly where it belongs within that single unified grid, which is both more directly expressive of the actual two-dimensional layout intent and typically requires meaningfully less nested markup and CSS than piecing the same layout together with flexbox alone.

Exercises

MediumPractice using Display: grid in a real scenario.

View Solution

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

Frequently Asked Questions

Why is grid generally considered better suited than flexbox for laying out an entire page's overall structure, like a header, sidebar, main content area, and footer together?▼

Related Functions

Grid-template-columnsGrid-template-rowsGrid-template-areas