Docs / Grid Row
Grid Row
vel-src: grid.css
Utilities for controlling how elements are sized and placed across grid rows.
| Class | Properties |
|---|
| vel-row-auto | grid-row: auto |
| vel-row-span-1 | grid-row: span 1 / span 1 |
| vel-row-span-2 | grid-row: span 2 / span 2 |
| vel-row-span-3 | grid-row: span 3 / span 3 |
| vel-row-span-full | grid-row: 1 / -1 |
Examples
Row span
row-span-2
1
1
A
B
col-span-3
<div class="vel-grid vel-grid-cols-3 vel-grid-rows-3 vel-gap-3" style="height:200px">
<div class="vel-row-span-2 vel-bg-primary vel-text-white vel-rounded-md vel-flex vel-items-center vel-justify-center vel-text-center" style="padding:12px">row-span-2</div>
<div class="vel-bg-surface-3 vel-text-muted vel-rounded-md vel-text-center" style="padding:12px;border:1px solid #1e2d45">1</div>
<div class="vel-bg-surface-3 vel-text-muted vel-rounded-md vel-text-center" style="padding:12px;border:1px solid #1e2d45">1</div>
<div class="vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">A</div>
<div class="vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">B</div>
<div class="vel-col-span-3 vel-bg-danger vel-text-white vel-rounded-md vel-text-center" style="padding:12px">col-span-3</div>
</div>