Splendid layouts

Grid Fr Auto

grid-fr-auto creates a two column grid. The first column is 1fr and the second column is auto. It also takes care of minmax declarations for you.

Auto then Fr

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

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

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-fr-auto">
  <div> ... </div>
  <div class="w-[10rem]"> ... </div>
</div>
Resize to see this work!
Content
Sidebar

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-fr-auto">
  <div class="md:w-[10rem]"></div>
  <div></div>
</div>
Resize to see this work!
Content
Sidebar