Grid Auto Rows

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "grid-auto-rows"; export const description = "Utilities for controlling the size of implicitly-created grid rows.";

<ApiTable rows={[ ["auto-rows-auto", "grid-auto-rows: auto;"], ["auto-rows-min", "grid-auto-rows: min-content;"], ["auto-rows-max", "grid-auto-rows: max-content;"], ["auto-rows-fr", "grid-auto-rows: minmax(0, 1fr);"], ["auto-rows-(<custom-property>)", "grid-auto-rows: var(<custom-property>);"], ["auto-rows-[<value>]", "grid-auto-rows: <value>;"], ]} />

Examples

Basic example

Use utilities like auto-rows-min and auto-rows-max to control the size of implicitly-created grid rows:

<!-- [!code classes:auto-rows-max] -->
<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Using a custom value

Responsive design

<ResponsiveDesign property="grid-auto-rows" defaultClass="grid grid-flow-row auto-rows-max" featuredClass="auto-rows-min" />