We write CSS that adapts to the current screen because we have explicitly coded it so. This is not fluid layout. CSS has long ways to go in order to be able to create truly DRY websites.

That's what I am trying to do with my collection No Media Query. In order for us to be able to create fluid layouts in the future, we have to dip our toes with components. Like the navigation bar I coded - no media query, yet it is 100% responsive.

I use grid-template-columns: repeat(auto-fit, minmax(VALUE, 1fr)); a lot trying to achieve no-media-query layout and it works wonders most of the time. I recently used it to to make FAQ boxes - coded the whole page in 50 minutes, entirely responsive with no media query! Media queries are one of the things that slow down development a lot - you have to test on many viewports, flip your phone numerous times, etc.

One of the reasons I hate Bootstrap is that it isn't fluid. If you start resizing the browser you see big chunks of white space around components - that's because the layout has to constantly calculate and evoke CSS rules. Not to mention the incredibly crowded and non semantic HTML it forces you to write.

And with a media query, no matter how skillfully you write it, there is going to be a breakpoint. And minus plus a pixel, it will look wacky. And of course your best customer will be browsing your website with the weird resolution.

The future CSS will be able to offer the option to write layout that is fluid out of the box. But to reach this level, we must continue innovating and trying to find ways to get around the limitations.

2,632 14 54