Grid Auto Flow

Class	Style
gaf-c	grid-auto-flow: column;
gaf-cd	grid-auto-flow: column dense;
gaf-d	grid-auto-flow: dense;
gaf-r	grid-auto-flow: row;
gaf-rd	grid-auto-flow: row dense;

Row

Initial value

The items will be placed in the grid by filling each row before moving to the next one.

A

B

C

D

E

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

Column

The items will be placed in the grid by filling each column before moving to the next one.

A

B

C

D

E

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

Dense

The items will be placed in the grid in a way that fills in gaps as efficiently as possible.

A

B

C

D

E

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

Row Dense

The items will be placed in the grid by filling each row first, while also attempting to fill any gaps efficiently.

A

B

C

D

<div class="d-g gaf-rd g-4 ta-c tc-white tc-white" id="area">
  <div class="bg-indigo p-4 rad-1">A</div>
  <div class="bg-indigo p-4 rad-1">B</div>
  <div class="bg-indigo p-4 rad-1">C</div>
  <div class="bg-indigo p-4 rad-1">D</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:gaf-*,md:gaf-*, lg:gaf-*, and xxl:gaf-* to allow targeting specific utilities in different viewports.

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

Hover variant

Alternatively, you can apply :hover by using h:gaf-* utility to override elements and change their values when hovering over them.

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