CSS Grid: A Complete Guide to Grid Layouts

CSS Grid is a layout module for creating two-dimensional grids. Unlike Flexbox, Grid lets you control rows and columns at the same time, making complex layouts easier to build. This article covers all the main CSS Grid properties with practical examples.

CSS Grid basics

Grid works like a grid: the container defines tracks (rows and columns), and items are placed in cells. To create a grid container:

.container {
  display: grid;
}

Direct children become grid items. By default, a single column is created, and items are stacked vertically.

Grid container properties

grid-template-columns and grid-template-rows

Define the sizes of columns and rows:

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

Units: px, %, fr, em, rem, auto. fr is a fraction of the available space.

repeat()

Repeat a pattern:

.container {
  grid-template-columns: repeat(3, 1fr); /* три равных столбца */
  grid-template-columns: repeat(4, 100px); /* четыре столбца по 100px */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* адаптивная сетка */
}

minmax()

Set the minimum and maximum track size:

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

The columns are at least 250px wide and expand evenly when there is enough space.

gap (grid-gap)

The space between cells:

.container {
  display: grid;
  gap: 1rem;
  /* или раздельно: */
  column-gap: 1rem;
  row-gap: 0.5rem;
}

justify-items and align-items

Align content within cells:

.container {
  justify-items: center;
  align-items: center;
}

place-items

Shorthand: align-items justify-items:

.container {
  place-items: center;
}

justify-content and align-content

Align the entire grid within the container when the grid is smaller than the container:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center;
  align-content: center;
  min-height: 100vh;
}

grid-auto-rows and grid-auto-columns

Set the sizes of implicitly created rows and columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

grid-auto-flow

The direction in which items are auto-placed: row (default), column, row dense, column dense:

.container {
  grid-auto-flow: dense;
}

dense fills empty cells with smaller items.

Grid item properties

grid-column and grid-row

Place an item in cells:

.item {
  grid-column: 1 / 3; /* с 1 по 3 линию */
  grid-row: 2 / 4;
}

.item-span {
  grid-column: span 2; /* на 2 столбца */
  grid-row: span 1;
}

grid-area

Shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end. It is also used with named areas.

justify-self and align-self

Align an individual item within its cell:

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

Named areas (grid-template-areas)

A convenient way to define a layout without explicit line numbers:

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

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

A period (.) represents an empty cell.

Practical examples

Responsive card grid

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

Page layout

.page {
  display: grid;
  grid-template-areas:
    "nav nav"
    "aside content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr auto;
  min-height: 100vh;
}

Gallery with a featured item

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

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

Equal-width columns

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

Responsiveness

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

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Tools

For quick Grid creation and configuration, use the CSS Grid Generator on rechecker.ru.

Comparing Grid and Flexbox

Grid is ideal for two-dimensional layouts. Flexbox is for one-dimensional layouts (a row or column). For more details, see Flexbox vs CSS Grid: when to use each.

Lines and numbering

Grid uses line numbering: the boundaries between cells. With 3 columns, there are 4 vertical lines (1–4). Negative indices are counted from the end: -1 is the last line.

.item {
  grid-column: 1 / -1; /* от первой до последней линии — вся строка */
}

The fit-content() function

Limits a track's size based on its content:

.container {
  grid-template-columns: fit-content(300px) 1fr fit-content(300px);
}

The side columns are no wider than 300px and adjust to fit the content.

Browser support

CSS Grid is supported in all modern browsers. It is not supported in IE10–11. For a fallback, you can use @supports:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .container > * {
    flex: 1 1 50%;
  }
}

Performance

Grid performs well with a typical number of cells (up to hundreds). With thousands of cells, delays are possible. It is recommended to limit the grid size and use virtualization for long lists.

Further reading

Practical examples of responsive Grid layouts are available in Responsive layouts with CSS Grid: practical examples. For a comparison with Flexbox, see Flexbox vs CSS Grid: when to use each.