grid-template-rows.mdx

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "grid-template-rows"; export const description = "Utilities for specifying the rows in a grid layout.";

<ApiTable rows={[ ["grid-rows-", "grid-template-rows: repeat(, minmax(0, 1fr));"], ["grid-rows-none", "grid-template-rows: none;"], ["grid-rows-subgrid", "grid-template-rows: subgrid;"], ["grid-rows-[]", "grid-template-rows: ;"], ["grid-rows-()", "grid-template-rows: var();"], ]} />

Examples

Specifying the grid rows

Use grid-rows-<number> utilities like grid-rows-2 and grid-rows-4 to create grids with n equally sized rows:

{

01

02

03

04

05

06

07

08

09

}

<!-- [!code classes:grid-rows-4] -->
<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

Implementing a subgrid

Use the grid-rows-subgrid utility to adopt the row tracks defined by the item's parent:

{

01

02

03

04

05

06

07

08

09

10

}

<!-- [!code classes:grid-rows-subgrid] -->
<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="row-span-3 grid grid-rows-subgrid gap-4">
    <div class="row-start-2">06</div>
  </div>
  <div>07</div>
  <!-- ... -->
  <div>10</div>
</div>

Using a custom value

Responsive design