tailwind1-4  Exercise 3: A Gallery Grid, Then a Self-Sizing One
===============================================================

Part 1: three columns, 16px gaps, 16:9 tiles, the first tile spanning two columns.

<div id="gal" class="grid grid-cols-3 gap-4 w-[900px]">
  <div id="t1" class="col-span-2 aspect-video bg-blue-200"></div>
  <div id="t2" class="aspect-video bg-blue-300"></div>
  <div id="t3" class="aspect-video bg-blue-400"></div>
  <div id="t4" class="aspect-video bg-blue-500"></div>
  <div id="t5" class="aspect-video bg-blue-600"></div>
</div>

  grid grid-cols-3   three equal columns (repeat(3, minmax(0, 1fr)))
  gap-4              16px between rows and columns
  col-span-2         the first tile takes two columns
  aspect-video       aspect-ratio: 16 / 9, so each tile's height follows its width

Measure every tile (width, height, left, top relative to the grid):

  const g = document.getElementById('gal').getBoundingClientRect();
  console.log(['t1', 't2', 't3', 't4', 't5'].map(id => {
    const r = document.getElementById(id).getBoundingClientRect();
    return [r.width, r.height, r.left, r.top - g.top].map(v => +v.toFixed(2));
  }));

Output (measured in headless Chrome):

  t1  594.66 x 334.48   at left 0,      top 0
  t2  289.34 x 162.75   at left 610.66, top 0
  t3  289.33 x 162.73   at left 0,      top 350.48
  t4  289.33 x 162.73   at left 305.33, top 350.48
  t5  289.34 x 162.75   at left 610.66, top 350.48

Part 2: let the grid choose the number of columns, each at least 12rem (192px) wide.

<div class="grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-4 w-[900px]"> ... six tiles ... </div>

  computed grid-template-columns: 4 tracks, each 213px

WHY THIS WORKS AS AN ANSWER
---------------------------
Part 1: the column width is (900 - 2 x 16) / 3 = 289.33px, and 16:9 means the height is the width x 9/16 = 162.75px. The first tile spans two columns plus the gap
between them: 2 x 289.33 + 16 = 594.66px (and its height 594.66 x 9/16 = 334.48px). The first row is therefore 334.48px tall, so the second row starts at
334.48 + 16 = 350.48px. The second tile starts at 594.66 + 16 = 610.66px. The odd .01px differences are the browser rounding thirds of a pixel.
Part 2: repeat(auto-fill, minmax(12rem, 1fr)) means "make as many columns as fit, each at least 12rem, and let them share the leftover". At 900px four columns fit
(4 x 192 + 3 x 16 = 816px), a fifth would need 5 x 192 + 4 x 16 = 1024px, so there are 4 columns of (900 - 3 x 16) / 4 = 213px. At a narrower width you would
get 3, 2 or 1 columns without writing a single breakpoint, which is the reason to prefer this over a fixed grid-cols-3 for card galleries.
Standard CSS note (not measured here): with few items, auto-fill keeps the empty columns while auto-fit collapses them; with plenty of items the two behave the same.