CSS Grid
A two-dimensional layout model for rows and columns.
Definition
CSS Grid lets you define a layout with both rows and columns simultaneously, placing items into specific cells. It handles complex page structures — like a sidebar next to content, or a gallery of differently sized images — that would be difficult with flexbox alone.
Example
.page { display: grid; grid-template-columns: 1fr 340px; } creates a two-column layout where the left column fills available space and the right column stays 340 pixels wide.
See it in context Learn how CSS Grid fits into the bigger picture of how software actually works.
Read the Guide →