Grid

Use the `hds-grid` class to arrange elements into rows and columns that automatically adapt to the available space.

Grid is a set of layout utility classes to help you organize content that can adapt to any device or screen size.

<div class="hds-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Examples

Grids work especially well for card lists and content designed for browsing.

Tulip

Tulipa gesneriana

Peony

Paeonia officinalis

Poppy

Papaver rhoeas

Sunflower

Helianthus annuus

Daisy

Bellis perennis

<div class="hds-grid">
  <div class="hds-stack hds-gap-s">
    <div class="hds-frame hds-border-radius-l">
      <img src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt="" />
    </div>
    <h3 class="hds-heading-m">Tulip</h3>
    <em>Tulipa gesneriana</em>
  </div>
  <div class="hds-stack hds-gap-s">
    <div class="hds-frame hds-border-radius-l">
      <img src="https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt="" />
    </div>
    <h3 class="hds-heading-m">Peony</h3>
    <em>Paeonia officinalis</em>
  </div>
  <div class="hds-stack hds-gap-s">
    <div class="hds-frame hds-border-radius-l">
      <img src="https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt="" />
    </div>
    <h3 class="hds-heading-m">Poppy</h3>
    <em>Papaver rhoeas</em>
  </div>
  <div class="hds-stack hds-gap-s">
    <div class="hds-frame hds-border-radius-l">
      <img src="https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt="" />
    </div>
    <h3 class="hds-heading-m">Sunflower</h3>
    <em>Helianthus annuus</em>
  </div>
  <div class="hds-stack hds-gap-s">
    <div class="hds-frame hds-border-radius-l">
      <img src="https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt="" />
    </div>
    <h3 class="hds-heading-m">Daisy</h3>
    <em>Bellis perennis</em>
  </div>
</div>

Population (Zion) 251,999

-3%

Minds Freed 0.36%

+0.03%

Agents Discovered 3

±0%

Sentinels Controlled 208

+1%

<div class="hds-grid" style="--min-column-size: 30ch;">
  <hds-card>
    <div class="hds-flank">
      <sl-avatar shape="rounded">
        <sl-icon slot="icon" name="globe"></sl-icon>
      </sl-avatar>
      <div class="hds-stack hds-gap-3xs">
        <span class="hds-caption-xs">Population (Zion)</span>
        <span class="hds-cluster hds-gap-xs">
          <span class="hds-heading-2xl">251,999</span>
          <sl-badge variant="danger">-3%&nbsp;<sl-icon name="arrow-trend-down"></sl-icon></sl-badge>
        </span>
      </div>
    </div>
  </sl-card>
  <hds-card>
    <div class="hds-flank">
      <hds-avatar shape="rounded">
        <sl-icon slot="icon" name="brain-circuit"></sl-icon>
      </sl-avatar>
      <div class="hds-stack hds-gap-3xs">
        <span class="hds-caption-xs">Minds Freed</span>
        <span class="hds-cluster hds-gap-xs">
          <span class="hds-heading-2xl">0.36%</span>
          <sl-badge variant="success">+0.03%&nbsp;<sl-icon name="arrow-trend-up"></sl-icon></sl-badge>
        </span>
      </div>
    </div>
  </sl-card>
  <hds-card>
    <div class="hds-flank">
      <hds-avatar shape="rounded">
        <sl-icon slot="icon" name="robot"></sl-icon>
      </sl-avatar>
      <div class="hds-stack hds-gap-3xs">
        <span class="hds-caption-xs">Agents Discovered</span>
        <span class="hds-cluster hds-gap-xs">
          <span class="hds-heading-2xl">3</span>
          <sl-badge variant="neutral">±0%&nbsp;<sl-icon name="wave-triangle"></sl-icon></sl-badge>
        </span>
      </div>
    </div>
  </sl-card>
  <hds-card>
    <div class="hds-flank">
      <hds-avatar shape="rounded">
        <sl-icon slot="icon" name="spaghetti-monster-flying"></sl-icon>
      </sl-avatar>
      <div class="hds-stack hds-gap-3xs">
        <span class="hds-caption-xs">Sentinels Controlled</span>
        <span class="hds-cluster hds-gap-xs">
          <span class="hds-heading-2xl">208</span>
          <sl-badge variant="success">+1%&nbsp;<sl-icon name="arrow-trend-up"></sl-icon></sl-badge>
        </span>
      </div>
    </div>
  </sl-card>
</div>

<style>
  hds-badge > hds-icon {
    color: color-mix(in oklab, currentColor, transparent 40%);
  }
</style>

Sizing

By default, grid items will wrap when the grid’s column size is less than 20ch, but you can set a custom minimum column size using the --min-column-size property.

<div class="hds-stack">
  <div class="hds-grid" style="--min-column-size: 200px;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-grid" style="--min-column-size: 6rem;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Gap

By default, the gap between grid items uses --hds-space-m from your theme. You can add any of the following hds-gap-* classes to an element with hds-grid to specify the gap between items:

hds-gap-0
hds-gap-xs
hds-gap-sm
hds-gap-base
hds-gap-lg
hds-gap-xl

<div class="hds-stack">
  <div class="hds-grid hds-gap-xs">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-grid hds-gap-xl">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Span Grid

You can add hds-span-grid to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.

<div class="hds-grid">
  <div></div>
  <div></div>
  <div class="hds-span-grid"></div>
  <div></div>
  <div></div>
</div>