Docs / Grid Template Rows

Grid Template Rows

vel-src: grid.css

Utilities for specifying the rows in a grid layout.

ClassProperties
vel-grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr))
vel-grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr))
vel-grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr))
vel-grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr))
vel-grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr))
vel-grid-rows-nonegrid-template-rows: none

Examples

Explicit rows

Row 1
Row 2
Row 3
example.html
<div class="vel-grid vel-grid-rows-3 vel-grid-flow-col vel-gap-3" style="height:200px;width:fit-content">
  <div class="vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px 24px">Row 1</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-md vel-text-center vel-opacity-60" style="padding:12px 24px">Row 2</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-md vel-text-center vel-opacity-30" style="padding:12px 24px">Row 3</div>
</div>