Suggest an edit

Improve this article

Refine the answer for “What is CSS Grid Layout?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts147 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.