CSS Grid Layout

CSS Grid is a two-dimensional layout system that arranges children into rows and columns defined by track sizes. Apply display: grid to a container, then define column and row tracks with grid-template-columns and grid-template-rows.

For one-dimensional layouts see flex-*.

Quick Start

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    gap: 10pt;
}

Container Properties

These properties are set on the grid container (the element with display: grid).

Property	Summary	Page
`display: grid`	Enables grid layout	this page
`grid-template-columns`	Column track sizes and count	grid-template-columns
`grid-template-rows`	Row track sizes and count	grid-template-rows
`grid-template-areas`	Named layout regions as a string map	grid-template-areas / grid-area
`grid-auto-flow`	How auto-placed items fill the grid: `row`, `column`, `dense`	grid-auto-flow
`grid-auto-columns` / `grid-auto-rows`	Size of implicitly created tracks	grid-auto-columns / grid-auto-rows
`gap` / `row-gap` / `column-gap`	Space between cells	gap / row-gap / column-gap
`justify-content`	Aligns the column tracks within the container	justify-content v9.7
`align-content`	Aligns the row tracks within the container	align-content v9.7

Item Properties

These properties are set on grid items (direct children of the grid container).

Property	Summary	Page
`grid-column`	Column placement and spanning	grid-column / grid-row
`grid-row`	Row placement and spanning	grid-column / grid-row
`grid-area`	Place item into a named template area	grid-template-areas / grid-area v9.7

Advanced Features

Feature	Summary	Page
grid line names	`[name]` bracket notation in track definitions	grid line names v9.7
`auto-fill` / `auto-fit` in `repeat()`	Fill tracks to fit container width	grid-template-columns v9.7

Enabling Grid Layout

.container { display: grid; }

Value	Support
`grid`	Supported
`inline-grid`	Not supported

Unsupported Features

Feature	Status
`minmax()`	Not supported
`subgrid`	Explicitly rejected — parse error if used
`inline-grid`	Not supported

Examples

Three-column card grid

<style>
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12pt; }
    .card { padding: 15pt; background-color: #dbeafe; border: 1pt solid #2563eb; }
</style>
<div class="grid">
    <div class="card"><h3>Feature A</h3><p>Description.</p></div>
    <div class="card"><h3>Feature B</h3><p>Description.</p></div>
    <div class="card"><h3>Feature C</h3><p>Description.</p></div>
</div>

Named-area page layout

<style>
    .page {
        display: grid;
        grid-template-columns: 160pt 1fr;
        grid-template-rows: 50pt 1fr 40pt;
        grid-template-areas:
            "header  header"
            "sidebar main"
            "footer  footer";
        gap: 8pt;
    }
    .header  { grid-area: header;  background-color: #1e3a8a; color: white; padding: 12pt; }
    .sidebar { grid-area: sidebar; background-color: #f3f4f6; padding: 12pt; }
    .main    { grid-area: main;    padding: 12pt; }
    .footer  { grid-area: footer;  background-color: #374151; color: white; padding: 10pt; }
</style>
<div class="page">
    <div class="header">Report Header</div>
    <div class="sidebar">Navigation</div>
    <div class="main">Main content</div>
    <div class="footer">Footer</div>
</div>