Skip to main content

What is CSS Grid Layout?

CSSJunior~1 min read
Suggest an edit

CSS Grid Layout is a two-dimensional layout system that lets you create grids and align elements by rows and columns at the same time. Unlike Flexbox (which works along a single axis: either a row or a column), Grid was designed from the start for full-fledged grid layouts.

Key features of Grid

  • two-dimensionality: control over both rows and columns
  • explicit grid: you can define the structure in advance (columns, rows, gaps)
  • precise positioning: elements can be placed by coordinates (grid-row, grid-column)
  • responsiveness: support for fractions (fr), auto-calculations, and automatic grid filling

Basic example:

css
.container { display: grid; grid-template-columns: 200px 1fr 1fr; /* 3 columns */ grid-template-rows: auto auto; /* 2 rows */ gap: 20px; }

Grid is used to build full-fledged page layouts, cards, galleries, and structural grids, while Flexbox is more convenient for linear arrangement of elements within blocks.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit