Grid Auto Columns

Controls the size of grid columns created implicitly.

Class	Property
gac-min	grid-auto-columns: min-content;
gac-max	grid-auto-columns: max-content;
gac-auto	grid-auto-columns: auto;

Min Content

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

A long piece of text

B

C

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

Max Content

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

A long piece of text

B

C

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

Auto

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

A long piece of text

B

C

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

---

Using responsive modifiers

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

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

Using hover modifiers

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

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