Grid Auto Columns

Utilities for controlling the size of automatically created grid columns.

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

Auto Columns Auto

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

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

Lorem Ipsum for big content 1

2

3

Auto Columns Min Content

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

<div class="grid auto-cols-min grid-flow-column gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">
    <div>Lorem Ipsum for 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 Columns Max Content

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

<div class="grid auto-cols-max grid-flow-column gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">
    <div>Lorem Ipsum for 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 Columns Fractional

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

<div class="grid auto-cols-fr grid-flow-column gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3