Use this instead of media queries or container queries

Media queries are a bit limited in how they work, and while container queries go a really long way in solving a lot of those limitations, there are intrinsic patterns that we can follow that allow us to do things that neither one of them can do.

The setup is a bit strange and can look complex, but, in my opinion, it's also 100% worth it!

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:00 - What we're going to be creating
01:56 - New merch!
02:22 - Changing flexbox layout based on the width of one of its children
09:30 - The grid solution

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

It reminds me of writing a more complex RegEx. At the time you write it, you know what you're doing, but one month later you just think WTF!

[stevelam]

I like this calc so that I can speak in tongue now and the computer or AI still loves to compute it. Thank you Kevin. For side note, I don't skip watching youtube ads on your videos and let them run to put $$ into your pocket.

[taylorsabbag]

Looked into Heydon Pickering and Andy Bell's Every Layout because of you, and I can't thank you enough. Currently completing my full-stack SWE bootcamp, and CSS felt like my weakness because I hated BEM (the methodology they teach us). I don't like the tight coupling between HTML and CSS of BEM nor the utility-only methods of Tailwind. The combination from CUBE CSS and Every Layout of these kinds of "algorithmic" layouts and Tailwind for exceptions and smaller styling concerns is exactly the approach that best agrees with my sensibilities. I.e. I want designs that are completely responsive and handle themselves with minimal modular CSS.

Anyways, I love these kinds of approaches to global, layout-driven, algorithmic CSS. It makes more sense for the modern web and its fragmented experiences.

[Dorchwoods]

This is neat for sure. I'll probably stick to media queries and container queries but i love the creativity and uniqueness of this approach. In my opinion, things this are much more useful when you write out an explanation in the css comments above or below. The way you wrote out the calc function with real values is super useful information for any developers coming into this file making changes later

[LukeDorny]

Omg. This couldn’t have come out at a better time. Thanks for this, Kevin.
Next, can you cover grids without breakpoints when one of the children spans two cols or two rows as a featured child? That’d be awesome, because at small sizes this breaks/overflows.

[clevermissfox]

We need a shirt championing the min() function!!! I adore it

[alanbloom]

A really nice pattern. Albeit with more complexity, a three segment break point is possible by nesting more min/max elements. Has been a very useful method for me for a long time before container queries were available.
As for readability, I agree with your previous video. We can’t shy away from these methods just because they are challenging concepts for some other people.

[CarlosHernandez]

Coming back to review this video and I have to point out a minor drawback to the grid approach: You get either one column, or your set number of columns, nothing in between.

[Clay]

Thank you a lot! Though it seems to be a bit comlicated, it's a great training in creativity and flexible mind!

[airixxxx]

Sometimes is better to go for the simpler approach than the fancy one.

[utoddl]

I like this much more than media queries. Math is not scary.

[henklangeveld]

Hi Kevin, I always love your content. Your grid breakpoint calculation could however be much simpler: Just add column-size and gap together, multiply by column-count then subtract one gap from that total (because, as you say, you have one less gaps than columns).

[Azhtyhx]

I'd say this is actual responsive css, whereas media queries is the hack method. It doesn't look strange or weird, but elegant in its complexity. Great video!

[SoreBrain]

This is exactly what I needed in my code. The css variables keep my svelte component very composable. I knew there was a way but I wasn't getting there myself without a lot uglier code. Thank you Kevin!

[bj-earn]

I did use something comparable on a slightly different usecase where I wanted to set a maximum number of columns.
So when there is enough space the grid should not display more then the maximum number of columns defined.
On smaller screens it just shrinks down to whatever it has room for.

grid-template-columns: repeat( auto-fit, minmax( max( var(--min-col-width), calc( (100% - (var(--gap) * 2) ) / var(--max-cols) ) ), 1fr));

I think the --min-col-width should contain the inner padding of a column.

[AndrleJan]

Yah, I am also the maths guy, so I like to use these approaches. I have just one note: for computation (and any internal) variable, I would use the JS private notation Or maybe double underscore, as I sometimes use default value approach `--_column-count: var(--column-count, 2); /* sets num of cols when enough spase */`.

[mohamedamineboukraia]

I really like the fact that you come up with these unorthodox ways of styling but from a reactJs developer perspective it's hard for me to focus too much on css ways of getting things done or search for the most elegant way to handle a certain situation I'd rather go with fastest way plus I feel I can get the same results thanx to Css-in-JS, but I salute you for your creativity and honestly you're the one who helped fall in love with css, GJ

[uncleelder]

Cool. This is the kind of CSS that you stick in a library. In the future, you'll remember what it does, but forget how it does it.😂

[pappapez]

This is great stuff! I think that if you use some library to write css for you, some of the calculations may fit there and you can keep the calc() calls to deal with things only css can do (like percentages, fr, and such).

[trinkel]

Yeah, love this idea. Is it difficult to read? Maybe, but we also want CSS to be a programing language. It's also a great use case for comments. I may not be able to make this stuff up, but I can understand it once I take the time to tear it down. If this method isn't for you, no one is forcing you to use it.

I think I would use a class for the sidebar instead of pseudo so I can have it left or right without changing the guts of the CSS. (I haven't totally thought that through, so no hate.)

I'm heading straight over to CodePen to pin these suckers. Hopefully I'll get a chance to use them somewhere.