tailwind1-7  Exercise 1: A Mobile-First Card Grid
=================================================

<main id="wrap" class="mx-auto max-w-6xl p-4">
  <div id="grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <div class="card h-20 bg-gray-200">1</div>
    ... seven more cards the same way ...
  </div>
</main>

  mx-auto max-w-6xl p-4              a centred page column, at most 72rem (1152px) wide, with 16px of padding
  grid grid-cols-1 gap-4             the phone layout: one column, 16px gaps (no prefix = every width)
  sm:grid-cols-2                     from 640px: two columns
  lg:grid-cols-4                     from 1024px: four columns

Measure it at each width (in DevTools' device toolbar, or in the console after resizing):

  const cols = getComputedStyle(document.getElementById('grid')).gridTemplateColumns.split(' ').length;
  const card = document.querySelector('.card').getBoundingClientRect().width;
  console.log(cols, card);

Measured in headless Chrome with the viewport set to each width:

  viewport 390:   1 column,  card 343px   (the wrapper was 375px wide: the emulated desktop page showed a 15px scrollbar)
  viewport 700:   2 columns, card 326px
  viewport 1100:  4 columns, card 255px
  viewport 1500:  4 columns, card 268px   (the wrapper stopped growing at 1152px)

WHY THIS WORKS AS AN ANSWER
---------------------------
Each card width is the wrapper width minus its 32px of padding (p-4 is 16px each side), minus the gaps, divided by the number of columns:
  390:  wrapper 375 -> 375 - 32 = 343 for one column (no gaps)
  700:  (700 - 32 - 16) / 2 = 326          (one 16px gap between two columns)
  1100: (1100 - 32 - 3 x 16) / 4 = 255     (three gaps between four columns)
  1500: max-w-6xl caps the wrapper at 1152, so (1152 - 32 - 3 x 16) / 4 = 268, and the page has spare margin on both sides (mx-auto)
The unprefixed grid-cols-1 is the phone layout and applies at all widths; sm: and lg: only replace it from 640 and 1024 upwards, which is why 700px gives 2 columns (sm applies,
lg does not yet) and nothing in the classes mentions "tablet". The 375px wrapper at a 390px viewport is a quirk of the measuring browser: its emulated desktop page reserved room for a
scrollbar. Media queries use the full 390px, so the breakpoints behave as above; on a real phone, which overlays its scrollbars, the wrapper would be 390px.