Grid Auto Flow

Controls the automatic placement of grid elements.

Class	Property
gaf-c	grid-auto-flow: column;
gaf-d	grid-auto-flow: dense;
gaf-dr	grid-auto-flow: dense row;
gaf-r	grid-auto-flow: row;
gaf-rd	grid-auto-flow: row dense;

Column

Auto-places grid items in a column flow direction.

A

B

C

D

E

<div class="ovf-auto p-8 p-r">
  <div class="stripes d-g g-4 gaf-c gtc-3 gtr-3 ta-c tc-white">
    <div class="bg-d-indigo-4 gc-s-2 p-4 rad-2">A</div>
    <div class="bg-d-indigo-4 gc-s-2 p-4 rad-2">B</div>
    <div class="bg-indigo p-4 rad-2">C</div>
    <div class="bg-d-indigo-4 p-4 rad-2">D</div>
    <div class="bg-d-indigo-4 p-4 rad-2">E</div>
  </div>
</div>

Column Dense

Auto-places grid items with a dense packing algorithm to fill gaps.

A

B

C

D

E

<div class="ovf-auto p-8 p-r">
  <div class="stripes d-g g-4 gaf-cd gtc-3 gtr-3 ta-c tc-white">
    <div class="bg-d-indigo-4 gc-s-2 p-4 rad-2">A</div>
    <div class="bg-d-indigo-4 gc-s-2 p-4 rad-2">B</div>
    <div class="bg-indigo p-4 rad-2">C</div>
    <div class="bg-d-indigo-4 p-4 rad-2">D</div>
    <div class="bg-d-indigo-4 p-4 rad-2">E</div>
  </div>
</div>

Dense

Combines dense placement with a row flow direction.

A

B

C

D

<div class="ovf-auto p-8 p-4">
  <div class="stripes d-g gaf-d g-4">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">A</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">B</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">C</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">D</div>
  </div>
</div>

Row

Auto-places grid items in a row flow direction.

A

B

C

D

<div class="ovf-auto p-8 p-4">
  <div class="stripes d-g gaf-r g-4">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">A</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">B</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">C</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">D</div>
  </div>
</div>

Row Dense

Combines dense placement with a row flow direction.

A

B

C

D

<div class="ovf-auto p-8 p-4">
  <div class="stripes d-g gaf-rd g-4">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">A</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">B</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">C</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-2 tc-white">D</div>
  </div>
</div>

---

Using responsive modifiers

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

<div class="gaf-c md:gaf-r ..."></div>

Using hover modifiers

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

<div class="gaf-c h:gaf-r ..."></div>