Aspect Ratio

Utility classes for controlling the aspect ratio of elements using the native CSS aspect-ratio property.

---

Available Ratios

Class	Ratio	Use case
aspect-square	1 / 1	Avatars, icons
aspect-video	16 / 9	Video embeds
aspect-cinema	21 / 9	Cinematic banners
aspect-photo	4 / 3	Photo thumbnails
aspect-portrait	3 / 4	Portrait cards
aspect-golden	1.618 / 1	Golden ratio
aspect-wide	2 / 1	Hero banners
aspect-ultra-wide	32 / 9	Ultra-wide panels

<div class="flex flex-wrap gap-2">
  <div class="aspect-square rounded-md" style="width: 100px; background: #3b82f6; display: flex; align-items: center; justify-content: center; color: #fff">1:1</div>
  <div class="aspect-photo rounded-md" style="width: 100px; background: #8b5cf6; display: flex; align-items: center; justify-content: center; color: #fff">4:3</div>
  <div class="aspect-video rounded-md" style="width: 140px; background: #ec4899; display: flex; align-items: center; justify-content: center; color: #fff">16:9</div>
  <div class="aspect-wide rounded-md" style="width: 140px; background: #f59e0b; display: flex; align-items: center; justify-content: center; color: #fff">2:1</div>
  <div class="aspect-portrait rounded-md" style="width: 80px; background: #10b981; display: flex; align-items: center; justify-content: center; color: #fff">3:4</div>
</div>

1:1

4:3

16:9

2:1

3:4

---

Custom Aspect Ratio

Use the aspect-custom class with the --aspect-ratio CSS custom property for any ratio:

<div class="flex gap-2">
  <div class="aspect-custom rounded-md" style="--aspect-ratio: 3/2; width: 150px; background: #6366f1; display: flex; align-items: center; justify-content: center; color: #fff">3:2</div>
  <div class="aspect-custom rounded-md" style="--aspect-ratio: 5/4; width: 150px; background: #0ea5e9; display: flex; align-items: center; justify-content: center; color: #fff">5:4</div>
</div>

3:2

5:4

---

Responsive Variants

All classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<div class="aspect-square md:aspect-video rounded-md p-3" style="max-width: 300px; background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center">
  Square on mobile, 16:9 from <code>md</code> up
</div>

Square on mobile, 16:9 from md up

---

SCSS

@use '@grundtone/design-tokens/scss/lib' as gt;

.hero {
  aspect-ratio: 21 / 9;

  @include gt.media-breakpoint-down('md') {
    aspect-ratio: 16 / 9;
  }
}