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.
<div class="grid-auto-fr"> <div> ... </div> <div> ... </div></div>Make a fixed-width sidebar easily
Add a width to the auto grid item to create a fixed-width sidebar.
<div class="grid-auto-fr"> <div class="w-[10rem]"> ... </div> <div> ... </div></div>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.
<div class="vertical md:grid-auto-fr"> <div></div> <div class="md:w-[10rem]"></div></div>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>Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
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>The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.
.grid-fr-auto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.
.grid-fr-auto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}Grid Fr Auto CSS Variables
| CSS Variable | Default | Description |
|---|---|---|
--gap-x | - | Gap between columns |
--gap-y | - | Gap between rows |
--gap | 1rlh | Gap between columms and rows. --gap-x and --gap-y will override this value. |
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Grid Fr Auto CSS Variables
| CSS Variable | Default | Description |
|---|---|---|
--gap-x | - | Gap between columns |
--gap-y | - | Gap between rows |
--gap | 1rlh | Gap between columms and rows. --gap-x and --gap-y will override this value. |