Grid: two-dimensional layout with tracks

CSS grid layout introduces a two-dimensional system for arranging major page areas and small user interface elements alike. Define a grid container by declaring display: grid or display: inline-grid on an element, which makes all its direct children grid items. Create grid tracks with the grid-template-columns and grid-template-rows properties: tracks can use fixed sizes such as pixels, or flexible sizes via percentages or the fr unit, which represents a fraction of the available space in the grid container, so three 1fr columns grow and shrink equally with that space. Items can be placed into precise locations using line numbers, names, or by targeting a grid area, while an auto-placement algorithm positions items given no explicit position, and more than one item can occupy a cell so overlapping content is layered with the z-index property. Grid combines with other CSS such as flexbox to create responsive, flexible, and accessible layouts. Scope: CSS grid layout. Reviewed October 4, 2026.