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
✅ Why complex CSS is okay: • Unfamiliar CSS pattern...
✅ Finished version, flexbox example: codepen.io/kevinpowell/pen/MW...
✅ Finished version, grid example: codepen.io/kevinpowell/pen/ab...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
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!

[@KevinPowell]

The nice thing with this is, if you set it up well, it's easy to update/change values with the custom properties, whereas regex one small change and half of your text vanishes 😅

[@florentd.5817]

Regex is simplier than css ! 😂

[@rossclutterbuck1060]

@@florentd.5817 then you really suck at CSS

[@florentd.5817]

@@rossclutterbuck1060 i know, i know... that why so many people use ready made css ( frameworks ).

[@2eanimation]

​@@rossclutterbuck1060 I'm comfortable writing both regex and CSS. Although this is comparing apples and cars as they have very different use-cases, Regex is WAY easier. Exhibit A: Regex docs are a 2-5 min read(type 'man regex' or 'python -c "import re; help(re)" ' in shell). Might take you some time to read and digest CSS docs :)

[@stevelam1315]

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.

[@taylorsabbag6962]

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.

[@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.

[@JoseRodriguez-rx4ck]

WTF man, I was about to do the same comment, about timing, and a suggestion about a featured child with a two columns span, hahaha, so weird.

[@airixxxx]

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

[@clevermissfox]

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

[@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

[@RobBulmahn]

Same. It's neat to know it exists and how it works, but I wholeheartedly disagree with Kevin on readability/maintainability. If this is for your own personal site, then fine, but if you're working on a project with others, or have to hand this off to others to maintain, I can guarantee they will all hate you.

[@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!

[@CarlosHernandez101400]

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.

[@alanbloom20]

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.

[@luckyduckystudios5709]

I always learn from your stuff. Thanks for the great content!🎉

[@uncleelder4922]

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.😂

[@Alex29196]

Try Obsidian, helps me a lot

[@deltaclub42]

Best tutorial about how make the other devs in the team hate you. It’s a very clever solution tho

[@Clay286]

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

[@utoddl]

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

[@BGdev305]

Except if it's trig! In this specific video of Kevin's I just don't see how this is easier than container queries.

[@einatblackrose]

This is probably exactly the tutorial I need now, yet I didn't manage to follow and comprehend (well, my math sucks). Thanks for making the effort to explain this. Maybe I'll get to it one day...

[@KevinPowell]

It's definitely a little strange. I had to pause a few times to try and explain it properly, so sorry if it wasn't clear enough but I was wrapping my mind around it too, lol.

[@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.

[@mohamedamineboukraia9317]

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

[@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).

[@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 `--_breakpoint`/`--_column-size`. Or maybe double underscore, as I sometimes use default value approach `--_column-count: var(--column-count, 2); /* sets num of cols when enough spase */`.

[@henklangeveld5463]

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).

[@alvaroprietovideos]

This video is amazing 🔝

[@olivierheimerdinger1629]

Wouaou so great!!!

[@daveturnbull7221]

I'm worried...this all actually made sense to me, even the min and max inside the minmax. I do believe some of your teaching is actually starting to sink into this dense skull of mine Kevin 🤣

[@e11world]

This is definitely a fun one. Kinda messed up since I'm not used to this much math but ok once you dissect it. I wonder if you have a similar approach to spacing and font sizes (I used something with min or max but always felt hacky.

[@Turabbo]

Looks like the sort of thing I'd spend hours formatting into a beautiful user-friendly mixin with validation and stuff. Just to end up being the only person in my company that uses it lol

[@gromit1768]

I'm still hoping that one day you'll write a book. I'd definetly buy it! :)

[@flx76]

A use-case I came across recently was to go from 1 column to 2 columns to 4 columns depending on the available space. Can you think of a good way to add such an intermediate step using this technique?

[@RandomGeometryDashStuff]

05:20 are outer parentheses in line 14 needed?

[@trinkel8]

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.

[@limbo3545]

I copy-paste it and never think about it ever again. Thank you so much!

[@laura-ashleekotelman2088]

I really like this way of working with the desired widths of the content first, rather than starting with browser width. I am getting a little confused on some of the numbers in the calculation. Can you explain in a bit more detail why are we multiplying this calculation times 9999?

[@yellowbonbon1]

Could you have a separated video to explain the "*999" or "* -999* ? That's very confusing. Thanks ahead.

[@ivanshi4258]

I think "*999" is just a flag which indicates whether 100% is greater than the "breakpoint" under the css "max()" func. if not using "*999" and your parent size being just a little narrower than "breakpoint", "max()" func will still choose the calculated column size instead of 100% of the outer "min()" func.

[@marlngomz]

Just curious ... Is the grid solution really solving the same issue as the flex solution? Isn't the grid solution fixing an amount of columns problem, and the flex solution a difference in when something goes on a row (differences in columns' size rate)?

[@dj10schannel]

Awesome

[@sovereignlivingsoul]

i am wondering how you get into the mindset of coming up with these methods, i find them very advanced in conception, after your video where you introduced this concept, i have been trying to incorporate them in my designs, my first attempt wasn't bad, i am still getting used to using custom properties so designing my layout based on them is going to be a bit of a challenge, but i will accept it, i think you got a great thing with this, it is just a matter of finding the right combinations.

[@ivanshi4258]

Thank you for your video :D which gives me a new thought to layout. But I still get confused about the "--column-size" variables, I think it might be "calc((100% - var(--gap) * (var(--column-count) - 1)) / var(--column-count))", Substract all gaps and then divided by count of columns. if divided first, i cannot get the same original column size as the calculation of "breakpoint".🤥

[@khalil_art]

What if we wanted a minimum of two columns on mobile and 4 on large screens?! I think that would be the best layout to make.

[@JawsoneJason]

Super cool, but I would never use this in a team setting.

[@LokiDaFerret]

All of your order of operation problems go away if you create more custom variables. A custom variable like --breakpoint-count makes your code much more readable and far more maintainable. The moral of the story is just because you can write everything with one line of CSS doesn't mean you should.

[@SilvesterBoots]

I'll agree, that complex operations should be shortened with readable variables.

[@felipefernandes9642]

What a beautiful "Hello World"! What font family are you using?

[@boby4751]

I do not see the link to download the code, or is it just me?

[@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!

[@nomadshiba]

if @container allowed you to select container itself, we could have made this easier to work with by using @container style(), by using the custom-properties as mixins

[@tauhidxahmed]

king

[@CasparDue]

Maybe clamp would work in the minmax part instead of min and max? minmax(clamp(var(--column-size), (100% - var(--breakpoint)) * -999 , 100%), 1fr)

[@user-uj9zz1jj4l]

this is super cool, i hate media queries, ill use this instead

[@ricardodasilva9241]

Isn't this the same as the "holy albatross" pattern and variants "unholy" and "devil"

[@farzadmf]

This seems like "nice only for the first person coming up with this solution" thing; I find this very hard to maintain in the long term.

[@JoepKockelkorn]

I agree

[@axMf3qTI]

You know what was hard to maintain? building layouts with floats and having browser incompatibility. This is a breeze.

[@EvanEdwards]

/* Again, there is a simple solution to explaining any complicated parts of CSS. */

[@kevbonett]

Without watching the whole video, I'm guessing you're using the "sidebar" Flexbox idea from Every Layout, and CSS Grid "auto-fit" feature? Both are great!

[@KevinPowell]

sidebar is a variation of what they did, but stepped up a little bit so that it's based on the width of the larger area, rather than the parent, and then I use that same technique within auto-fit afterwards :)

[@kevbonett]

@@KevinPowell yes, I watched the video in full after adding my comment... very cool.

[@User-404]

Lots of math creating the variables. I'll wrap my head around that

[@fray-roe1715]

Do you have a Udemy course?

[@CarlosHernandez101400]

To me, your code is as "complicated" as Shakespear-style English. Sure, it looks complicated, but if you take the time to look thru it, it actually is quite readable and highly functional (a Sonnete might make you more lucky with the ladies than, "You must be tired, because you've been running on my mind all day"). Needing to figure out different breakpoints to set up MQs vs changing 1 or 2 variables is worth typing out the Calc functions. Thanks, Kevin!

[@erickdavid4257]

my head hurts

[@user-vu1cr3zr6j]

M * X dont need to be wrapped like (M * X) your big calc does the latter..

[@hiddensinger2630]

Super calculation, but its difficult for me

[@selvaganapathia5049]

Hi...

[@MartijnSnapper]

Maybe a slightly different approach, I want to set the maximum number of columns. For this I use the clamp() function. --cols: 3; --gap: 1rem; --min-width: 20ch; grid-template-columns: repeat( auto-fill, minmax(clamp(var(--min-width), 100% / var(--cols) - var(--gap), 100%), 1fr) );

[@czerskip]

People who call those beautiful solutions hacks should go back in time twenty something years and try coding for IE 5.5 for Mac 😅

[@crazyingenieur3277]

I think you made a math mistake at 13:05... your formula should be .... + gap * (column_count - 1)... you put your parenthesis in the wrong place. And I think your column_size calc is also wrong... If you want to calculate the column size for each... you subtract all the gaps (gap * column_count) from 100% and then divide it by the column count.

[@johansmith2840]

it's just css's of scripting(functions )

[@Alex-fm9oj]

It looks like a cool thing that you shouldn't use anywhere other than your own projects.

[@BGdev305]

Sorry, I just don't.. or better yet, can't see how this is easier to accomplish then with container queries. Yes, compared to the amount of math, etc. used in this video, I don't mind using more lines of code to accomplish this using media queries. Compared to trying to figure out the science of CSS you used in this video I'd do some display:none first.. sorry.

[@user-iv1pt2sy8j]

Why does it want to grow if you put flex grow to NEIN NEIN NEIN!!! ..?

[@KevinPowell]

I have one at 999 and the other at 1. If you have one at 2, and the other at 1, the first will grow at a rate 2x faster than the other... so this is a bit of a hack to make sure one of them grows (the one with the 999) and takes up all the available space, while the other one is basically stuck at the flex-basis that we set.

[@liannotti2]

@@KevinPowell Such a good and helpful answer but I think @user-iv1pt2sy8j was joking... "Nein Nein Nein" in German is "No No No!" (Don't grow.)

[@OleksandrPanteli]

good to know but definitely NOT gonna use it in production

[@eqlipt]

I'd rather stick with media queries. This seems too complicated, and I don't see any potential benefits over @media.

[@MatthewKennedyUK]

Don’t watch this if you’re on your first week into css.

[@ajitmali3821]

css is becoming more and more programming language😅

[@porknwithbill]

This is way over complicated