A practical tour of modern CSS — Grid, custom properties, container queries, subgrid, clamp() and oklch — with guidance on when each one replaces the JavaScript and hacks of the past.
CSS has quietly become one of the most powerful parts of the web platform. Layouts that once needed float hacks, JavaScript, or a framework are now a few lines of native CSS. If your mental model of CSS is stuck a few years back, you're writing more code than you need to. Here are the modern techniques worth knowing in 2026 and when to use each.
Layout: Grid and Flexbox
CSS Grid for two-dimensional layouts Grid handles rows and columns together, making complex page and card layouts trivial. Reach for Grid when you're positioning things in two dimensions; use Flexbox for one-dimensional rows or columns. Most real layouts use both.
Subgrid for aligned nesting Subgrid lets nested elements align to their parent's grid tracks — solving the long-standing problem of making card contents line up across a grid regardless of content length.
Theming and maintainability
Custom properties (CSS variables) Define reusable values (colors, spacing, radii) once and let them cascade. They're the backbone of theming — including light/dark mode — and unlike preprocessor variables they're live at runtime, so you can change them with a media query or a class.
Cascade layers @layer gives you explicit control over specificity, ending the "!important" arms race in large codebases.
Responsive design, done right
Container queries The biggest recent leap: style a component based on the size of its container, not just the viewport. This makes genuinely reusable components that adapt wherever they're placed — a game-changer for design systems.
Fluid typography with clamp() clamp() lets font sizes and spacing scale smoothly between a min and max without a dozen breakpoints — important for the huge range of screen sizes on India's mobile-first web.
Logical properties Use margin-inline and padding-block instead of left/right so layouts adapt automatically to different writing directions and are easier to internationalize.
Modern color
Color spaces like oklch produce more even, predictable gradients and easier programmatic color manipulation than hex or rgb.
Best practices
- Prefer native CSS over JavaScript for layout and interactions where possible — it's faster and more robust.
- Build components with container queries so they're truly reusable.
- Centralize design tokens as custom properties.
- Test on real low-end Android devices, not just a desktop browser.
Frequently asked questions
Do I still need a CSS framework like Bootstrap? Often not. Modern CSS (Grid, custom properties, container queries) plus a utility framework like Tailwind covers most needs with less weight.
Are container queries safe to use in production? Yes — they have broad browser support in 2026 and are the right tool for reusable, context-aware components.
Is Tailwind or plain CSS better? Both are valid. Tailwind speeds up consistent UI work (we use it across our builds); plain modern CSS is excellent when you want full control. The key is using modern features either way.
Need a web app that looks sharp and performs on every device? Talk to us about your project.