ContextQMD
Back to Tailwindcss

Grid Template Rows

src/docs/grid-template-rows.mdx

latest4.1 KB
Original Source

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-<number>", "grid-template-rows: repeat(<number>, minmax(0, 1fr));"], ["grid-rows-none", "grid-template-rows: none;"], ["grid-rows-subgrid", "grid-template-rows: subgrid;"], ["grid-rows-[<value>]", "grid-template-rows: <value>;"], ["grid-rows-(<custom-property>)", "grid-template-rows: var(<custom-property>);"], ]} />

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:

<Figure> <Example> { <div className="grid grid-cols-1"> <Stripes border className="col-start-1 row-start-1 rounded-lg" /> <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white"> <div className="rounded-lg bg-pink-500 p-4">01</div> <div className="rounded-lg bg-pink-500 p-4">02</div> <div className="rounded-lg bg-pink-500 p-4">03</div> <div className="rounded-lg bg-pink-500 p-4">04</div> <div className="rounded-lg bg-pink-500 p-4">05</div> <div className="rounded-lg bg-pink-500 p-4">06</div> <div className="rounded-lg bg-pink-500 p-4">07</div> <div className="rounded-lg bg-pink-500 p-4">08</div> <div className="rounded-lg bg-pink-500 p-4">09</div> </div> </div> } </Example>
html
<!-- [!code classes:grid-rows-4] -->
<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
</Figure>

Implementing a subgrid

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

<Figure> <Example> { <div className="grid grid-flow-col grid-rows-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white"> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">01</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">02</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">03</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">04</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">05</div> <div className="row-span-3 grid grid-rows-subgrid gap-4"> <Stripes border className="h-14 rounded-lg" /> <div className="grid h-14 items-center justify-center rounded-lg bg-fuchsia-500">06</div> <Stripes border className="h-14 rounded-lg" /> </div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">07</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">08</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">09</div> <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">10</div> </div> } </Example>
html
<!-- [!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>
</Figure>

Using a custom value

<UsingACustomValue utility="grid-rows" name="rows" value="200px_minmax(900px,1fr)_100px" />

Responsive design

<ResponsiveDesign property="grid-template-rows" defaultClass="grid grid-rows-2" featuredClass="grid-rows-6" />