Grid Auto Rows

Controls the size of grid lines created implicitly.

Class	Property
gar-min	grid-auto-rows: min-content;
gar-max	grid-auto-rows: max-content;
gar-auto	grid-auto-rows: auto;

Min Content

Sets the size of implicitly created rows to the minimum content size.

A long piece of text

B

C

<div class="ovf-auto rad-1">
  <div class="d-g gar-min gtc-min g-4">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1 tc-white">A long piece of text</div>
    <div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1 tc-white">B</div>
    <div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1 tc-white">C</div>
  </div>
</div>

Max Content

Sets the size of implicitly created rows to the maximum content size.

A long piece of text

B

C

<div class="ovf-auto rad-1">
  <div class="d-g gar-max gtc-max g-4">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1 tc-white">A long piece of text</div>
    <div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1 tc-white">B</div>
    <div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1 tc-white">C</div>
  </div>
</div>

Auto

Sets the size of implicitly created rows to adjust automatically based on the available space.

A long piece of text

B

C

<div class="ovf-auto rad-1">
  <div class="d-g gar-auto gtc-auto g-4">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1 tc-white">A long piece of text</div>
    <div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1 tc-white">B</div>
    <div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1 tc-white">C</div>
  </div>
</div>

---

Using responsive modifiers

Using responsive breakpoints like sm:gar-*, md:gar-*, lg:gar-*, and xxl:gar-* allows targeting specific utilities in different viewports.

<div class="gar-min md:gar-auto ..."></div>

Using hover modifiers

Using :hover modifiers such as h:gar-* allows you to override elements and change their values when hovering over them.

<div class="gar-min h:gar-auto ..."></div>