CSS Modern Features

Introduction

Modern CSS has gained superpowers. Features that used to require JavaScript or complex hacks—like container-aware layouts, subgrids, and logical properties—are now native.

In this chapter, you will learn:

• Container Queries: Styling based on parent size, not viewport.
• Subgrid: Perfect alignment for nested grids.
• Logical Properties: Building international-ready layouts.
• Modern viewport units and responsive utilities like clamp().

Container Queries (@container)

Unlike media queries (which check screen size), container queries check the size of a parent element. This enables truly reusable components.

/* 1. Define the container */
.container {
  container-type: inline-size;
}

/* 2. Query the container path */
@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Subgrid

Subgrid allows nested grids to inherit the track definition of their parent, ensuring perfect alignment.

.parent {
  display: grid;
  grid-template-columns: 150px 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* Aligns with .parent */
}

Logical Properties

Use logical directions (start/end) instead of physical ones (left/right) for better internationalization support (RTL/LTR).

Modern Utilities

Fluid Typography with clamp()

/* Min: 1.8rem, Ideal: 4vw, Max: 3rem */
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }

Aspect Ratio

.video { aspect-ratio: 16 / 9; }

New Viewport Units

• svh: Small Viewport (ignoring address bar)
• lvh: Large Viewport (with address bar hidden)
• dvh: Dynamic Viewport (adjusts automatically)

Common Beginner Mistakes & Best Practices