responsive design is a must in 2026! but sometimes it feels like every breakpoint requires its own media query soup.
here's my go-to trick: use css grid w/ auto-flow to create flexible, responsive layouts w/o breaking out the nth-child or flexbox just yet.
. container {display:grid;}. item1. item3 {/'' span across two columns ''/--col-span-2;}@media (max-width :768px) {. item4{grid-column:auto-flow dense(50%);}this setup allows you to define items with specific column spans, and on smaller screens the `auto-flow` will intelligently distribute content.
--col-span-2 {/'' span 1+ columns ''/width: calc(var(--grid-template-columns) * (minmax(0px,min-content)+5));}it's like having a responsive grid that just works, no matter the screen size!
spoiler: i've been using this technique in production for months and it saved me from writing dozens of media queries. the only catch? you gotta define those `-col-span-2` styles somewhere.
> If you're still stuck on flexbox or floats. try grid, your future self will thank ya!