Splendid layouts

Grid Auto Fr

grid-auto-fr is the opposite of grid-fr-auto. It puts the auto column before the fr column.

Auto then Fr

grid-auto-fr creates a two column grid with auto and fr.

index.html
<div class="grid-auto-fr">
  <div> Sidebar </div>
  <div> Content </div>
</div>
Sidebar
Content

Make a fixed-width sidebar easily

Add a width to the auto grid item to create a fixed-width sidebar.

index.html
<div class="grid-auto-fr">
  <div class="w-[10rem]"> ... </div>
  <div> ... </div>
</div>
Resize to see this work!
Sidebar
Content

Create responsive layouts by combining this with vertical

grid-fr-auto is not responsive-friendly by itself, but you can combine it with vertical on smaller breakpoints to make great responsive layouts.

index.html
<div class="vertical md:grid-auto-fr">
  <div></div>
  <div class="md:w-[10rem]"></div>
</div>
Resize to see this work!
Sidebar
Content