Grid Auto Rows

vel-src: grid.css

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

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

Examples

Auto rows (fr)

vel-auto-rows-fr — implicit rows share container height equally

Row A

Row B

example.html

<div>
  <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-auto-rows-fr — implicit rows share container height equally</p>
  <div class="vel-grid vel-grid-cols-2 vel-auto-rows-fr vel-gap-3" style="height:160px">
    <div class="vel-bg-primary vel-text-white vel-rounded-md vel-flex vel-items-center vel-justify-center vel-text-center" style="padding:12px">Row A</div>
    <div class="vel-bg-primary vel-text-white vel-rounded-md vel-flex vel-items-center vel-justify-center vel-text-center vel-opacity-50" style="padding:12px">Row A</div>
    <div class="vel-bg-success vel-text-white vel-rounded-md vel-flex vel-items-center vel-justify-center vel-text-center" style="padding:12px">Row B</div>
    <div class="vel-bg-success vel-text-white vel-rounded-md vel-flex vel-items-center vel-justify-center vel-text-center vel-opacity-50" style="padding:12px">Row B</div>
  </div>
</div>