Modern CSS Techniques for Cleaner Layouts

CSS in 2026 is unrecognizable from even five years ago. Features that once required JavaScript workarounds are now native, well-supported, and production-ready. Here are three techniques we use daily at thehtml.studio.

Container Queries

Media queries respond to the viewport. Container queries respond to the size of a parent element. This is transformative for component-based architectures.

Instead of writing breakpoints that assume a full-width layout, you can write styles that adapt based on the actual space a component has. A card component in a sidebar behaves differently from the same card in a three-column grid — without any JavaScript.

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

CSS Grid Subgrid

Subgrid solves a long-standing problem: aligning nested grid items to a parent grid. Before subgrid, you had to manually synchronize track sizes between parent and child grids. Now, a child grid can inherit its parent's track definitions.

This is particularly useful for card layouts where you want titles, descriptions, and buttons to align across cards regardless of content length.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

The :has() Selector

Often called the "parent selector," :has() lets you style an element based on its descendants. This eliminates entire categories of JavaScript that existed solely to toggle parent classes.

/* Style a form group differently when its input is focused */
.form-group:has(input:focus) {
  border-color: var(--primary);
}

/* Hide a section if it has no visible children */
.section:has(> :not([hidden])) {
  display: block;
}

Browser Support

All three features have strong browser support in 2026. Container queries and :has() are supported in all modern browsers. Subgrid is available in Chrome, Firefox, Safari, and Edge. For the small percentage of users on older browsers, these features degrade gracefully — layouts still work, they just do not adapt as elegantly.

The takeaway: modern CSS is powerful enough to handle layouts that previously required CSS-in-JS libraries or complex JavaScript. Write less code. Ship faster. Maintain easier.