ContextQMD
Back to Tailwindcss

Grid Row

src/docs/grid-row.mdx

latest4.2 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-row"; export const description = "Utilities for controlling how elements are sized and placed across grid rows.";

<ApiTable rows={[ ["row-span-<number>", "grid-row: span <number> / span <number>;"], ["row-span-full", "grid-row: 1 / -1;"], ["row-span-(<custom-property>)", "grid-row: span var(<custom-property>) / span var(<custom-property>);"], ["row-span-[<value>]", "grid-row: span <value> / span <value>;"], ["row-start-<number>", "grid-row-start: <number>;"], ["-row-start-<number>", "grid-row-start: calc(<number> * -1);"], ["row-start-auto", "grid-row-start: auto;"], ["row-start-(<custom-property>)", "grid-row-start: var(<custom-property>);"], ["row-start-[<value>]", "grid-row-start: <value>;"], ["row-end-<number>", "grid-row-end: <number>;"], ["-row-end-<number>", "grid-row-end: calc(<number> * -1);"], ["row-end-auto", "grid-row-end: auto;"], ["row-end-(<custom-property>)", "grid-row-end: var(<custom-property>);"], ["row-end-[<value>]", "grid-row-end: <value>;"], ["row-auto", "grid-row: auto;"], ["row-<number>", "grid-row: <number>;"], ["-row-<number>", "grid-row: calc(<number> * -1);"], ["row-(<custom-property>)", "grid-row: var(<custom-property>);"], ["row-[<value>]", "grid-row: <value>;"], ]} />

Examples

Spanning rows

Use row-span-<number> utilities like row-span-2 and row-span-4 to make an element span n 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-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white"> <div className="row-span-3 grid place-content-center rounded-lg bg-fuchsia-500 p-4">01</div> <div className="col-span-2 grid place-content-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400"> 02 </div> <div className="col-span-2 row-span-2 grid place-content-center rounded-lg bg-fuchsia-500 p-4">03</div> </div> </div> } </Example>
html
<!-- [!code classes:row-span-2,row-span-3] -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="col-span-2 row-span-2 ...">03</div>
</div>
</Figure>

Starting and ending lines

Use row-start-<number> or row-end-<number> utilities like row-start-2 and row-end-3 to make an element start or end at the nth grid line:

<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-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white"> <div className="row-span-2 row-start-2 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">01</div> <div className="row-span-2 row-end-3 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">02</div> <div className="row-start-1 row-end-4 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">03</div> </div> </div> } </Example>
html
<!-- [!code classes:row-start-1,row-start-2,row-end-3,row-end-4] -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-2 row-start-2 ...">01</div>
  <div class="row-span-2 row-end-3 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>
</Figure>

These can also be combined with the row-span-<number> utilities to span a specific number of rows.

Using a custom value

<UsingACustomValue utilities={["row", "row-span", "row-start", "row-end"]} variable="rows" name="grid row size and location" value="span_16_/_span_16" />

Responsive design

<ResponsiveDesign properties={["grid-row", "grid-row-start", "grid-row-end"]} defaultClass="row-span-3" featuredClass="row-span-4" />