Basic Usage

grid-auto-fr lets you create a two-column grid with auto as the first column and 1fr as the second column.

<div class="grid-auto-fr">
  <div>...</div>
  <div>...</div>
</div>

You can add a width for the auto portion if you need it to be a specific size.

<div class="grid-auto-fr">
  <div class="w-[10rem]">...</div>
  <div>...</div>
</div>

Changing the gap between grid items

You can change the gap between grid items with the gap property or the --gap variable.

<div class="grid-auto-fr gap-8">
  <div class="w-[10rem]">...</div>
  <div>...</div>
</div>

Responsive Behaviour

grid-auto-fr is not responsive so it’s usually used only on tablet or desktop breakpoints. You can combine it with vertical to create a nice responsive layout.

When you do this, set the width property on the auto item at the same breakpoint you use for grid-auto-fr.

<div class="vertical md:grid-auto-fr">
  <div class="md:w-[10rem]">...</div>
  <div>...</div>
</div>