---
title: "CSS Grid"
description: "CSS Grid is a two-dimensional layout system that splits a page into columns and rows. Learn how it works, its properties and how it differs from Flexbox."
url: "https://nodea.io/en/glossary/css-grid"
lang: "en"
updated: "2026-07-13"
---

# CSS Grid

> CSS Grid is a two-dimensional CSS layout system that lets you place page elements across columns and rows at the same time, giving precise control over the entire grid.

**CSS Grid**, formally **CSS Grid Layout**, is a powerful two-dimensional layout system in [CSS](https://nodea.io/en/glossary/css) that lets you place page elements across columns and rows at the same time. Unlike earlier techniques based on floats or positioning, Grid was designed from the ground up for building complex [layouts](https://nodea.io/en/glossary/layout) — from simple product grids to elaborate templates with a header, sidebar and footer. Today it is supported by every modern browser.

## How CSS Grid works

Grid is built on the relationship between a container and its direct children. A parent element becomes a grid when you set *display: grid*, and inside it you define the structure:

- **grid-template-columns / grid-template-rows** — declare the number and size of columns and rows; you can use the *fr* unit (a fraction of free space), pixels, percentages or the *minmax()* function.
- **gap** — sets spacing between cells without margins on the items.
- **grid-template-areas** — lets you name grid regions and assign elements to them, making the code read like a map of the layout.
- **Placement** — individual elements can span multiple columns and rows via *grid-column* and *grid-row*.

Note that Grid and [Flexbox](https://nodea.io/en/glossary/responsive-design) are complementary tools — Grid handles the two-dimensional skeleton of the page, Flexbox the one-dimensional arrangement of items within its cells.

## CSS Grid in practice

CSS Grid is a cornerstone of modern, responsive web design:

1. **Whole-page layout** — placing header, content, sidebar and footer in a few lines of code, without nested containers.
2. **Galleries and product listings** — grids that automatically fit the number of columns to the screen width using *auto-fit* and *minmax()*.
3. **Responsiveness** — combined with [media queries](https://nodea.io/en/glossary/media-query), one grid flows smoothly from a multi-column desktop layout to a single-column mobile one.

As a result, Grid often replaces the elaborate grid systems shipped with CSS frameworks, delivering more flexibility with less code.

### How is CSS Grid different from Flexbox?

Flexbox is one-dimensional — it arranges items along a single axis (a row or a column). CSS Grid is two-dimensional and controls columns and rows simultaneously, giving full command of the whole grid. In practice, Grid is used for the page's macro-layout and Flexbox for arranging items inside components.

## Related

- [CSS (Cascading Style Sheets)](https://nodea.io/en/glossary/css)
- [Responsive Design](https://nodea.io/en/glossary/responsive-design)
- [Layout](https://nodea.io/en/glossary/layout)
- [Media query](https://nodea.io/en/glossary/media-query)
- [Bootstrap](https://nodea.io/en/glossary/bootstrap)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/grid.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)