Grid Auto Rows

Utilities for controlling the size of automatically created grid rows.

Class Name	CSS Equivalent
auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-auto-rows: minmax(0, 1fr);

Auto Rows Auto

The .auto-rows-auto class sets the grid-auto-rows property to 'auto', allowing automatically created rows to have their own size based on content.

<div class="grid auto-rows-auto grid-flow-row gap-m w-full">
  <div class="[...]"
    >Lorem Ipsum for <br />
    big content 1</div
  >
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

Lorem Ipsum for
big content 1

2

3

Auto Rows Min Content

The .auto-rows-min class sets the grid-auto-rows property to 'min-content', making automatically created rows sized based on their minimum content.

<div class="grid auto-rows-min grid-flow-row gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">
    <div>Lorem Ipsum for <br />big content 2</div>
    <div>Small Content</div>
  </div>
  <div class="[...]">3</div>
</div>

1

Lorem Ipsum for
big content 2

Small Content

3

Auto Rows Max Content

The .auto-rows-max class sets the grid-auto-rows property to 'max-content', making automatically created rows sized based on their maximum content.

<div class="grid auto-rows-max grid-flow-row gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">
    <div>Lorem Ipsum for <br />big content 2</div>
    <div>Small Content</div>
  </div>
  <div class="[...]">3</div>
</div>

1

Lorem Ipsum for
big content 2

Small Content

3

Auto Rows Fractional

The .auto-rows-fr class sets the grid-auto-rows property to 'minmax(0, 1fr)', making automatically created rows have equal fractions of the available space.

<div class="grid auto-rows-fr grid-flow-row gap-m w-full">
  <div class="[...]"
    >Lorem Ipsum for <br />
    big content 1</div
  >
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

Lorem Ipsum for
big content 1

2

3