grid-row
En esta página
| Clase | Propiedades CSS |
|---|---|
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:
{
<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>
}
<!-- [!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>
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:
{
<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>
}
<!-- [!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>
These can also be combined with the row-span-<number> utilities to span a specific number of rows.