Modern CSS Tricks for Clean Layouts

Modern CSS has evolved far beyond simple styles and media queries. With advanced features supported across all major browser engines, developers can build complex, fluid, and robust layouts with minimal JavaScript.

Let’s explore three powerful CSS techniques that simplify responsive layouts.

1. Container Queries (@container)

For years, we relied on media queries to change component styles based on the viewport width. However, this is limiting if a component needs to adapt when placed inside a narrow sidebar versus a wide main column.

Container queries solve this by letting you style a component relative to the size of its parent container:

1
/* Define the parent container */
2
.sidebar-wrapper, .main-wrapper {
3
  container-type: inline-size;
4
}
5

6
/* Adjust card layout depending on container width */
7
@container (min-width: 400px) {
8
  .product-card {
9
    display: flex;
10
    flex-direction: row;
11
    gap: 16px;
12
  }
13
}

2. Alignment with CSS Subgrid

When building card grids, aligning the headers or footers of adjacent cards can be tricky if they have varying content lengths. Prior to subgrid, we had to hardcode min-heights or use JavaScript.

With CSS Grid subgrid, child elements can inherit the row/column tracks defined on their parent grid container:

1
.card-grid {
2
  display: grid;
3
  grid-template-columns: repeat(3, 1fr);
4
  grid-template-rows: auto auto auto; /* row slots for header, body, footer */
5
}
6

7
.card-item {
8
  display: grid;
9
  grid-row: span 3; /* spans all three grid rows */
10
  grid-template-rows: subgrid; /* inherits the grid row definitions */
11
}

3. Dynamic Theme Management with Custom Properties

CSS Custom Properties (Variables) enable dynamic component styles. By defining theme tokens at the root, you can swap palettes cleanly using standard selectors:

1
:root {
2
  --primary-color: #3b82f6;
3
  --bg-color: #ffffff;
4
}
5

6
[data-theme="dark"] {
7
  --primary-color: #60a5fa;
8
  --bg-color: #1e293b;
9
}
10

11
body {
12
  background-color: var(--bg-color);
13
  color: var(--primary-color);
14
  transition: background-color 0.3s ease;
15
}

Using these modern CSS tools ensures that your web application remains scalable, performant, and clean, reducing layout bugs and streamlining design systems.