Intrinsic Sizing in Modern Layouts

The web is not a static canvas. It is a fluid medium where content should dictate its own container. One of the most powerful shifts in CSS is moving from extrinsic sizing (setting widths) to intrinsic sizing.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
  gap: clamp(1rem, 5vw, 3rem);
}

By using ch units, we anchor our layout to the typography itself. This ensures that even without media queries, our grid items remain readable across any screen size.