Lesson 3 of 11Article14 min
Layout, Spacing & Sizing
Layout, Spacing & Sizing
Core layout utilities
Container, flex, grid, gap
<!-- Centered container -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Flex navbar -->
<nav class="flex items-center justify-between gap-4 py-4">
<!-- Grid cards -->
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Spacing -->
<div class="p-6 m-4 mt-8 space-y-4">
<div class="w-full h-48 max-w-md min-h-[200px]">Spacing scale
- p-4 = padding 1rem (16px). m-2 = margin 0.5rem.
- px-4 py-2 — horizontal and vertical padding.
- space-y-4 — gap between stacked children.
- gap-6 — gap in flex/grid containers.
- Scale: 1=4px, 2=8px, 4=16px, 6=24px, 8=32px, 12=48px.