Grid Auto Rows

Utility	Properties
Error: 429

Auto

Initial value

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="o-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-indigo-8 d-f jc-c p-4 rad-1 tc-white">B</div>
    <div class="ai-c bg-indigo-8 d-f jc-c p-4 rad-1 tc-white">C</div>
  </div>
</div>

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="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-indigo-8 d-f jc-c p-4 rad-1 tc-white">B</div>
    <div class="ai-c bg-indigo-8 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="o-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-indigo-8 d-f jc-c p-4 rad-1 tc-white">B</div>
    <div class="ai-c bg-indigo-8 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 modifier

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

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

Hover modifier

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

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