Dynamic Layouts with CSS :has() without JavaScript

Stop using Javascript to change your layout dynamically.

You can do it entirely with CSS.

Here’s how it works:

• 1. Use input elements (checkbox or radio) to mimic click actions.
• 2. The :has() pseudo-class lets a parent element respond to a child’s state.

—> Example: .container:has(input) .child {}

• 3. Use :checked to detect if an input is selected.

—> Example: input[type="radio"]:checked {}

• 4. Combine :has() and :checked to target specific states and apply styles dynamically.

—> Example: .container:has(input:checked) .child {}

In the example below, we just change the grid-template-columns values when a specific checkbox has been checked.

You can use this for multiple things like e-commerce product, portfolio galleries, dashboards, blog layout, …

Modern CSS makes it easier than ever to create interactive layouts.

Using :has() to switch layouts can remove a lot of small JS toggles. Keep the condition explicit and local, so layout changes happen only where users expect them.

Using :has() for layout switching can remove small JS toggles while keeping logic declarative. Keep conditions explicit so layout changes remain predictable.

This pattern has the best payoff when documented with one clear usage rule. Consistent adoption turns small CSS features into reliable system behavior.

When introducing .container:has(input) .child {}, begin with one reference component and treat it as the canonical pattern. This keeps implementation predictable and prevents style drift as the codebase grows.

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!