Grid Auto Columns

vel-src: grid.css

Utilities for controlling the size of implicitly-created grid columns.

Class	Properties
vel-auto-cols-auto	grid-auto-columns: auto
vel-auto-cols-min	grid-auto-columns: min-content
vel-auto-cols-max	grid-auto-columns: max-content
vel-auto-cols-fr	grid-auto-columns: minmax(0, 1fr)

Examples

Auto columns (fr)

vel-grid-flow-col + vel-auto-cols-fr — implicit columns share available space equally

Auto A

Auto B

Auto C

example.html

<div>
  <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-grid-flow-col + vel-auto-cols-fr — implicit columns share available space equally</p>
  <div class="vel-grid vel-grid-flow-col vel-auto-cols-fr vel-gap-3">
    <div class="vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px">Auto A</div>
    <div class="vel-bg-primary vel-text-white vel-rounded-md vel-text-center vel-opacity-60" style="padding:12px">Auto B</div>
    <div class="vel-bg-primary vel-text-white vel-rounded-md vel-text-center vel-opacity-30" style="padding:12px">Auto C</div>
  </div>
</div>