Layout

Aspect ratios

These utility classes that can be used on wrapper elements for constraining the aspect ratio of whatever their immediate child element is. These can be used to wrap tiles, cards, images, videos, embeds, or whatever you need to be constrained to an aspect ratio.

Notes on aspect ratios

The aspect-ratio classes maintain a block wrapper’s aspect ratio unless deformed by excess content within. For example, you may have a hero image with a text overlay. On wider viewports it makes sense to maintain the aspect ratio but on small phones the text may be too much for the down-scaled wrapper, so you will want it to be taller than the aspect ratio requires in order to still contain the overlay text.

Common image/video aspect ratios

Portrait 3×4

Landscape 4×3

Widescreen 16×9

Ultrawide 18x5

<div class="aspect-ratio-3:4">3×4</div>

<div class="aspect-ratio-4:3">4×3</div>

<div class="aspect-ratio-16:9">16×9</div>

<div class="aspect-ratio-18:5">18×5</div>

Aspect ratio styles can be distorted

aspect-ratio-* wrappers constrain their content to the set aspect ratio unless there’s too much content in the immediate child element. This means that at small viewport widths, if you have a lot of text content inside, it will “override” the aspect ratio for phones. Example:

This content is within a wrapper with aspect-ratio-16:9 but at smaller viewport widths, all this text will deform the aspect ratio wrapper constraint.

// Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ad corrupti expedita blanditiis! Consequatur mollitia temporibus dolorum, dolorem dolor soluta vero ab facere sint velit. Dolor consequuntur repellat, minus molestiae totam earum accusantium dolorum eligendi exercitationem ratione aliquam quibusdam nihil veniam atque labore magni doloremque iusto!

<div class="aspect-ratio-16:9 bg-neutral flex justify-center items-center">
  <div class="w-xs p-1">
    Lorem ipsum dolor sit amet...
  </div>
</div>

In situations where you don’t want this deformation to happen, we can wrap the content in a block with the CSS class box – and may need to add overflow-y if the content needs to be scrolled.

Squared tile aspect ratios

There are sufficient aspect ratio squared tile utility classes, for up to a 6×6 tile layout. Squared tiles can be mapped on to a 6×6 grid.

Example:

1×1

1×2

1×3

3×1

1×1

3×5

2×1

1×1

<div class="grid grid-cols-6">
  <div class="grid-col-1 grid-row-1 aspect-ratio-1:1">1×1</div>
  <div class="grid-col-2 grid-row-span-2 aspect-ratio-1:2">1×2</div>
  <div class="grid-col-3 grid-row-span-3 aspect-ratio-1:3">1×3</div>
  <div class="grid-col-start-4 grid-col-span-3 grid-row-1 aspect-ratio-3:1">3×1</div>
  <div class="grid-col-1 grid-row-2 aspect-ratio-1:1">1×1</div>
  <div class="grid-col-span-3 grid-row-span-4 aspect-ratio-3:5">3×5</div>
  <div class="grid-col-span-2 row-3 aspect-ratio-2:1">2×1</div>
  <div class="grid-col-span-3 grid-row-span-2 aspect-ratio-1:1">1×1</div>
</div>

Available square tile aspect-ratio- utility suffixes:

		Horizontal aspect
		1	2	3	4	5	6
Vertical aspect	1	`-1:1`	`-2:1`	`-3:1`	`-4:1`	`-5:1`	`-6:1`
	2	`-1:2`	—	`-3:2`	—	`-5:2`	—
	3	`-1:3`	`-2:3`	—	`-4:3`	`-5:3`	—
	4	`-1:4`	—	`-3:4`	—	`-5:4`	—
	5	`-1:5`	`-2:5`	`-3:5`	`-4:5`	—	`-6:5`
	6	`-1:6`	—	—	—	`-6:5`	—

The ‘missing’ utilities are unnecessary. E.g. we don’t need -3x3 because we can use -1x1; we don’t need -2x4 because we can use -1x2; etc.

Besides the “all viewports” examples above, there are media query tiered variants of the squared tile aspect ratio classes: xs:, sm:, md:, and lg:. @TODO - CHECK BREAKPOINTS

These variants enable you to both set up and rearrange a square tile array for different device sizes.