Grid Row Span
Span across grid rows
Syntax
layout="row-span:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
1-12 | grid-row: span {n} / span {n} | Span N rows |
full | grid-row: 1 / -1 | Span all rows |
Examples
html
<div layout="row-span:2">Spans 2 rows</div>Preview
Row Span
layout="row-span:2" - Item spanning multiple rows
row-span:21234
View Code
html
<div layout="grid grid-cols:3 grid-rows:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<span layout="row-span:2 flex center" space="p:small" visual="bg:primary text:white rounded:small">row-span:2</span>
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">4</span>
</div>