CSS Guide 2026: Modern Layout, Responsive & Design Systems
A modern CSS guide for 2026 — Grid, Flexbox, container queries, cascade layers, and design-system fundamentals.
Layout: Grid + Flexbox
Grid: two-dimensional (rows and columns). Best for page layouts, cards, gallery grids.
Flexbox: one-dimensional (row or column). Best for navigation, form rows, alignment within a row.
Subgrid (Baseline 2023) lets child grids inherit parent tracks — huge for card grids and forms.
Responsive Design
Media queries still fine for viewport-level breakpoints.
Container queries (Baseline 2023) let components respond to their container size.
clamp() for fluid typography and spacing: font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem).
Powerful Selectors
:has() — the long-awaited parent selector. Style a parent based on children.
:is() + :where() — group selectors and manage specificity.
@supports — feature detection without JS.
Modern CSS features and support
| Feature | Baseline year | Practical use |
|---|---|---|
| Grid | 2020 | Page layout |
| Flexbox | 2018 | One-D alignment |
| Custom properties | 2019 | Tokens |
| Container queries | 2023 | Component responsiveness |
| :has() | 2023 | Parent styling |
| Nesting | 2023 | Nested rules |
| Subgrid | 2023 | Aligned child grids |
Design Tokens
CSS custom properties for colors, spacing, radii, typography.
Define once at :root or a wrapping selector; override in components or themes.
Light + dark themes via [data-theme='dark'] or prefers-color-scheme.
Cascade Layers
@layer reset, base, components, utilities lets you control cascade order explicitly.
Framework CSS in one layer, your overrides in a higher layer — no !important battles.
Other Modern Features
Nesting (Baseline 2023) — write nested rules like Sass, natively.
color-mix() — blend colors without preprocessors.
aspect-ratio for reliable image/embed boxes.
scroll-snap for polished carousels.
backdrop-filter for frosted-glass effects.
Building a Design System
Tokens layer (CSS custom properties).
Base layer (resets, typography).
Component layer (buttons, cards, forms).
Utility layer (spacing, alignment helpers).
Document with Storybook, Ladle, or MDX-based docs.
Frequently Asked Questions
Do I still need Tailwind or Sass?+
Tailwind is great for productivity + design consistency. Sass is less necessary since CSS gained nesting and custom properties.
Grid or Flexbox?+
Both. Grid for 2D layout, Flexbox for 1D alignment. Use whichever fits the shape.
Are container queries production-ready?+
Yes — Baseline 2023, supported in every evergreen browser.
Should I use CSS-in-JS?+
Not by default. Modern CSS + design tokens covers most needs with better performance.
How do I handle dark mode?+
prefers-color-scheme media query + CSS custom properties. Or a theme toggle with [data-theme] attribute.