CSS Grid

CSS Grid, formally CSS Grid Layout, is a powerful two-dimensional layout system in 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 — 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 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, 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.