Docs / Grid Column
Grid Column
vel-src: grid.css
Utilities for controlling how elements are sized and placed across grid columns.
| Class | Properties |
|---|
| vel-col-auto | grid-column: auto |
| vel-col-span-1 | grid-column: span 1 / span 1 |
| vel-col-span-2 | grid-column: span 2 / span 2 |
| vel-col-span-3 | grid-column: span 3 / span 3 |
| vel-col-span-4 | grid-column: span 4 / span 4 |
| vel-col-span-6 | grid-column: span 6 / span 6 |
| vel-col-span-full | grid-column: 1 / -1 |
| vel-col-start-1 | grid-column-start: 1 |
| vel-col-end-1 | grid-column-end: 1 |
Examples
Column span
col-span-2
1
1
col-span-4 (full width)
<div class="vel-grid vel-grid-cols-4 vel-gap-3">
<div class="vel-col-span-2 vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px">col-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-col-span-4 vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">col-span-4 (full width)</div>
</div>