Docs / Grid Template Columns

Grid Template Columns

vel-src: grid.css

Utilities for specifying the columns in a grid layout.

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

Examples

3 equal columns

1
2
3
4
5
6
example.html
<div class="vel-grid vel-grid-cols-3 vel-gap-4">
  <div class="vel-bg-primary vel-text-white vel-rounded-lg vel-text-center" style="padding:16px">1</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-lg vel-text-center" style="padding:16px">2</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-lg vel-text-center" style="padding:16px">3</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-lg vel-text-center vel-opacity-50" style="padding:16px">4</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-lg vel-text-center vel-opacity-50" style="padding:16px">5</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-lg vel-text-center vel-opacity-50" style="padding:16px">6</div>
</div>

4 columns

1
2
3
4
example.html
<div class="vel-grid vel-grid-cols-4 vel-gap-3">
  <div class="vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">1</div>
  <div class="vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">2</div>
  <div class="vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">3</div>
  <div class="vel-bg-success vel-text-white vel-rounded-md vel-text-center" style="padding:12px">4</div>
</div>