Grid Auto Rows

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

Min Content

This example sets the grid auto rows to min-content. The rows will size themselves to the smallest possible height that does not cause overflow.

Pneumonoultramicroscopicsilicovolcanoconiosis

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">Pneumonoultramicroscopicsilicovolcanoconiosis</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

This example sets the grid auto rows to max-content. The rows will size themselves to the largest possible height based on their content.

Pneumonoultramicroscopicsilicovolcanoconiosis

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">Pneumonoultramicroscopicsilicovolcanoconiosis</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

This example sets the grid auto rows to auto. The rows will size themselves based on the content and available space in the grid container.

Pneumonoultramicroscopicsilicovolcanoconiosis

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">Pneumonoultramicroscopicsilicovolcanoconiosis</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>

Conditional styles

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

Media modifiers

You can combine 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>

Hover modifiers

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

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