Modern Layout Techniques

What you'll learn

CSS keeps getting better. This module covers the modern layout features that make designs more resilient and intelligent — consistent aspect ratios, direction-agnostic spacing, and container queries, which let components respond to their own size rather than the whole screen.

By the end you'll be able to:

• Lock consistent proportions with aspect-ratio
• Use logical properties for cleaner, international-friendly spacing
• Make truly reusable components with container queries
• Use gap and the place-* shorthands

aspect-ratio

aspect-ratio keeps an element's proportions no matter its width — set 16 / 9 for video thumbnails, 1 / 1 for square avatars. Paired with object-fit: cover on images, it ends the era of padding hacks for responsive media boxes:

.thumb {
  aspect-ratio: 16 / 9;   /* always 16:9, whatever the width */
  object-fit: cover;      /* fill the box, cropping if needed */
  width: 100%;
}

Logical properties

Instead of left/right and top/bottom, logical properties think in terms of inline (the text direction) and block(across lines). margin-inline: auto sets left and right in one go; padding-block sets top and bottom. Beyond being concise, they automatically adapt to right-to-left languages like Arabic and Hebrew:

.card {
  margin-inline: auto;   /* left + right */
  padding-block: 24px;   /* top + bottom */
  padding-inline: 16px;  /* left + right */
}

Container queries

Media queries respond to the viewport. But a card in a wide main area and the same card in a narrow sidebar want different layouts — and the viewport can't tell them apart. Container queries solve this: a component responds to the size of its own container. This is the key to genuinely reusable, context-aware components:

.sidebar {
  container-type: inline-size;   /* become a query container */
}

/* Style based on the CONTAINER's width, not the viewport's */
@container (min-width: 400px) {
  .card { display: flex; gap: 16px; }
}

gap & place-*

gap — which you met in Flexbox and Grid — is the clean way to space children without margin hacks. And the place-items and place-content shorthands set both alignment axes at once: place-items: center in a grid centers everything, both horizontally and vertically, in a single line. There's also subgrid, which lets a nested grid line up with its parent's tracks — handy for keeping card contents aligned across a gallery.

Recap & quick check

That completes Phase 5 — you know modern, professional CSS! Phase 6shifts to the practices that separate hobbyists from pros, beginning with CSS architecture.