Navigation

 v0.0.4
Layouts

Auto grid

As many equal columns as fit, counted by the grid itself.

On this page

An auto grid holds as many equal columns as fit, none narrower than a minimum. It needs no query: the grid counts its own columns from the room it is given, so the same markup is four tiles across a dashboard, two in a sidebar and one down a phone.

It is a layout class because the rule behind it, repeat(auto-fill, minmax(min(100%, 16rem), 1fr)), is one a utility cannot write and one that is easy to get subtly wrong. The min(100%, …) is what keeps a single column from being wider than a narrow screen.

Auto grid

<div class="auto-grid p-lg bg-surface-base">  <article class="card">    <header class="card-header">      <h3 class="card-title">Atlas</h3>      <p class="card-description">atlas.dev</p>    </header>  </article>  <article class="card">    <header class="card-header">      <h3 class="card-title">Borealis</h3>      <p class="card-description">borealis.app</p>    </header>  </article>  <article class="card">    <header class="card-header">      <h3 class="card-title">Cinder</h3>      <p class="card-description">cinder.io</p>    </header>  </article>  <article class="card">    <header class="card-header">      <h3 class="card-title">Drift</h3>      <p class="card-description">drift.so</p>    </header>  </article>  <article class="card">    <header class="card-header">      <h3 class="card-title">Ember</h3>      <p class="card-description">ember.dev</p>    </header>  </article>  <article class="card">    <header class="card-header">      <h3 class="card-title">Fathom</h3>      <p class="card-description">fathom.app</p>    </header>  </article></div>
Choose Tablet, then Phone: four columns become two, then one. No query was written.

#The minimum

--auto-grid-min is the narrowest a column may be, 16rem by default. A smaller minimum makes more, narrower columns: 11rem suits figures, 20rem suits cards with a paragraph in them.

A narrower minimum

<div class="auto-grid p-lg bg-surface-base" style="--auto-grid-min: 11rem">  <section class="sheet p-md">    <div class="stat">      <p class="stat-label">Requests</p>      <div class="stat-row">        <p class="stat-value">1.28M</p>        <p class="stat-delta stat-delta-up">12.4%</p>      </div>    </div>  </section>  <section class="sheet p-md">    <div class="stat">      <p class="stat-label">Visitors</p>      <div class="stat-row">        <p class="stat-value">84.2K</p>        <p class="stat-delta stat-delta-up">3.1%</p>      </div>    </div>  </section>  <section class="sheet p-md">    <div class="stat">      <p class="stat-label">Bandwidth</p>      <div class="stat-row">        <p class="stat-value">74 GB</p>      </div>    </div>  </section>  <section class="sheet p-md">    <div class="stat">      <p class="stat-label">Builds</p>      <div class="stat-row">        <p class="stat-value">212</p>      </div>    </div>  </section>  <section class="sheet p-md">    <div class="stat">      <p class="stat-label">Domains</p>      <div class="stat-row">        <p class="stat-value">9</p>      </div>    </div>  </section>  <section class="sheet p-md">    <div class="stat">      <p class="stat-label">Members</p>      <div class="stat-row">        <p class="stat-value">4</p>      </div>    </div>  </section></div>

The gap is 1rem. Change it with a gap utility on the grid, such as gap-lg: utilities come after the library's classes.

#Fill or fit

By default empty columns keep their place, so two tiles in a wide grid stay the size of tiles. auto-grid-fit collapses the empty columns and lets the tiles that exist share the whole row. Use the default for a collection that grows; use fit for a fixed set that should always fill its row.

Fit

<div class="flex flex-col gap-lg p-lg bg-surface-base fg-text-body text-sm">  <div class="flex flex-col gap-xs">    <p class="eyebrow">auto-grid</p>    <div class="auto-grid">      <div class="well p-md">One</div>      <div class="well p-md">Two</div>    </div>  </div>  <div class="flex flex-col gap-xs">    <p class="eyebrow">auto-grid auto-grid-fit</p>    <div class="auto-grid auto-grid-fit">      <div class="well p-md">One</div>      <div class="well p-md">Two</div>    </div>  </div></div>

#When not to use it

When the number of columns is part of the design, say so: grid grid-cols(3) and a container variant such as grid-cols(3)@container(--4xl). An auto grid decides for itself, which is right for collections and wrong for a layout where the third column means something.

#Accessibility

  • The grid changes how many columns there are, never the order: items read left to right, top to bottom, in source order.
  • Use a list, <ul class="auto-grid">, when the tiles are a set of like things, so their number is announced.

#Classes

ClassDescription
auto-gridEqual columns, as many as fit at --auto-grid-min or wider, with a 1rem gap. Empty columns keep their place
auto-grid-fitEmpty columns collapse, so the tiles that exist share the whole row. With auto-grid

#Custom properties

PropertyDefaultDescription
--auto-grid-min16remThe narrowest a column may be; a column is never wider than the grid itself

#Source

@master/ui/layouts/auto-grid.css
/* * Auto grid: as many equal columns as fit, none narrower than --auto-grid-min. It needs no query: the * grid counts its own columns from the room it is given, so the same markup is four tiles across a * dashboard and one down a phone. A column is never wider than the grid itself, which is what keeps * a narrow screen from overflowing. * By default empty columns keep their place, so a lone tile stays a tile; `auto-grid-fit` lets the tiles * that exist share the whole row. * A collection is often a list, <ul class="auto-grid">, so the grid clears a list's indent and markers. */@layer components {  .auto-grid {    --auto-grid-min: 16rem;    --auto-grid-track: minmax(min(100%, var(--auto-grid-min)), 1fr);    display: grid;    grid-template-columns: repeat(auto-fill, var(--auto-grid-track));    gap: 1rem;    min-width: 0;    margin: 0;    padding: 0;    list-style: none;    &.auto-grid-fit {      grid-template-columns: repeat(auto-fit, var(--auto-grid-track));    }  }}