Grid Fr Auto

Basic Usage

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

<div class="GridFrAuto">
  <div>...</div>
  <div>...</div>
</div>

Adding a width for the auto column

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

<div class="GridFrAuto">
  <div>...</div>
  <div class="w-[10rem]">...</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="GridFrAuto gap-8">
  <div>...</div>
  <div>...</div>
</div>

Responsive Behaviour

GridFrAuto is not responsive is nature so you should use it only at certain breakpoints.

One common way is to use SingleCol at mobile breakpoints and GridFrAuto at desktop breakpoints.

<div class="SingleCol md:GridFrAuto">
  <div>...</div>
  <div>...</div>
</div>

Controlling width

If you give your auto grid item a width property, that auto grid item will not be full width on mobile. This is correct because your width value is being used.

<div class="SingleCol md:GridFrAuto">
  <div>...</div>
  <div class="w-[10rem]">...</div>
</div>

But you normally don’t want items to happen in most layouts. There are two ways to fix this.

1. Set responsive variants on width
2. Use items-center

Using responsive variant on width

By doing this, you ensure width remains unchanged (from the auto value) on mobile. So it will respect the default align-items: stretch from SingleCol.

<div class="SingleCol md:GridFrAuto">
  <div>...</div>
  <div class="md:w-[10rem]">...</div>
</div>

Using items center

By using items-center you change SingleCols default align-items: stretch to align-items: center. This centers the offending element.

<div class="SingleCol items-center md:GridFrAuto">
  <div>...</div>
  <div class="w-[10rem]">...</div>
</div>

Here’s the CSS for GridFrAuto.

The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.

.GridFrAuto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--gap, 1rem);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;

  > *,
  > *:where(astro-island, astro-slot) > * {
    max-width: 100%;
  }
}

Grid Fr Auto

CSS Variables