Grid Auto Fr

Basic Usage

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

It is not widely used for macro layouts because Shell-grid does a better job, but it can be used to create micro layouts in place of flex and flex-grow.

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

Adding a width for the auto column

You can add a width to the grid item to control the size of the auto column if you wish to.

<div class="GridAutoFr">
  <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="GridAutoFr gap-8">
  <div>...</div>
  <div>...</div>
</div>

<div class="GridAutoFr" style="--gap:2rem">
  <div>...</div>
  <div>...</div>
</div>

Responsive Behaviour

The responsive behaviour for GridAutoFr is the same as that for GridFrAuto. It 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 GridAutoFr at desktop breakpoints.

<div class="SingleCol md:GridAutoFr">
  <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:GridAutoFr">
  <div class="w-[10rem]">...</div>
  <div>...</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:GridAutoFr">
  <div class="md:w-[10rem]">...</div>
  <div>...</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:GridAutoFr">
  <div class="w-[10rem]">...</div>
  <div>...</div>
</div>

Here’s the CSS for GridAutoFr.

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

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

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

Grid Auto Fr

CSS Variables