grid

Setting layout of grid system.

Overview

Examples

Set the native grid shorthand

Use grid:* when you need the complete CSS grid shorthand in one class.

<div class="grid:none">    ...</div>

@layer utilities {    .grid\:none {        grid: none    }}

Define rows, columns, and auto flow together

Use pipe separators for spaces inside the shorthand and / for the row/column separator.

<section class="grid:auto-flow|1fr/1fr|1fr">    ...</section>

The grid shorthand resets several grid longhands. For most layouts, prefer focused utilities such as grid-template-columns, grid-template-rows, grid-auto-flow, and gap.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="grid:none grid:auto-flow|1fr/1fr|1fr@sm grid:none@print">...</div>

Use the static grid display utility when the goal is only display: grid.