CSS Grid Layout

CSS Grid Layout introduces a set of properties that define a grid container and its children. The display: grid property creates a block-level grid, while grid-template-columns and grid-template-rows define the track sizes. The fr unit distributes free space proportionally, and the gap property controls spacing between tracks. Grid items can be placed using line numbers, named lines, or named areas via grid-area. The auto-placement algorithm simplifies the creation of responsive layouts without explicit positioning.

Beyond basic placement, Grid offers powerful features like minmax() for flexible track sizing, repeat() for concise track definitions, and auto-fit/auto-fill for responsive behavior. The grid-auto-flow property controls the direction of auto-placement, and dense packing fills gaps. Subgrids, introduced in 2022, allow nested grids to align with their parent's tracks, enabling complex nested layouts. These features make Grid suitable for both simple card layouts and intricate dashboard designs.

CSS Grid was implemented in Chrome, Firefox, and Safari in 2017, with Edge following in 2020. This rapid adoption was driven by the need for a robust layout system for modern web applications. Grid's support for RTL (right-to-left) languages and its ability to handle dynamic content have made it a favorite among developers. Tools like Autoprefixer and CSS Grid Generator have eased the learning curve, and frameworks like Bootstrap 5 have integrated Grid into their layout systems.

One overlooked feature is the grid-template-areas property, which allows visual ASCII-art-like definitions of layouts, making code more readable. Another is the grid-auto-rows and grid-auto-columns properties, which control the size of implicitly created tracks. The grid-row-start and grid-column-start properties can use the span keyword to define item size. Additionally, Grid can be used for alignment of individual items with justify-self and align-self, and the order property can reorder items without changing the DOM. The writing-mode property interacts with Grid to support vertical text layouts, a feature rarely discussed but useful for East Asian typography.

Grid container

An element with display: grid, which establishes a new grid formatting context for its children.

Grid track

The space between two adjacent grid lines, either a row or a column.

fr unit

A flexible length unit that represents a fraction of the free space in the grid container.

Grid area

A rectangular region of the grid defined by four grid lines, used for placing items.

Subgrid

A nested grid that inherits the track definitions of its parent grid, allowing alignment.