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.
8 หลายเดือนก่อน +62
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!
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 😅
@@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 :)
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.
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.
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
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.
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.
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).
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!
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.
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).
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...
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.
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
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.
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.
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.
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 */`.
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?
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.
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".🤥
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 🤣
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)?
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
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?
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.
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.
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!
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.
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
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) );
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!
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!
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 :)
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.
I replaced flex-basis: calc(((var(--main-min-width) - (100% - var(--sidebar-size) - var(--gap))) * 9999)); width this one: flex-basis: var(--main-min-width); and it worked the same! Is there any difference in work?
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.
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!
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 😅
Regex is simplier than css ! 😂
@@florentd.5817 then you really suck at CSS
@@rossclutterbuck1060 i know, i know... that why so many people use ready made css ( frameworks ).
@@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 :)
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.
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.
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.
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
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.
Thank you a lot! Though it seems to be a bit comlicated, it's a great training in creativity and flexible mind!
We need a shirt championing the min() function!!! I adore it
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.
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).
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!
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.
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).
Sometimes is better to go for the simpler approach than the fancy one.
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.😂
Try Obsidian, helps me a lot
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...
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.
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
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.
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.
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.
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 */`.
I always learn from your stuff. Thanks for the great content!🎉
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?
Could you have a separated video to explain the "*999" or "* -999* ? That's very confusing. Thanks ahead.
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.
I like this much more than media queries. Math is not scary.
Except if it's trig! In this specific video of Kevin's I just don't see how this is easier than container queries.
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".🤥
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 🤣
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)?
What a beautiful "Hello World"! What font family are you using?
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
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?
Best tutorial about how make the other devs in the team hate you. It’s a very clever solution tho
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.
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.
I'll agree, that complex operations should be shortened with readable variables.
I'm still hoping that one day you'll write a book. I'd definetly buy it! :)
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!
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.
Maybe clamp would work in the minmax part instead of min and max?
minmax(clamp(var(--column-size), (100% - var(--breakpoint)) * -999 , 100%), 1fr)
I copy-paste it and never think about it ever again. Thank you so much!
I do not see the link to download the code, or is it just me?
Super cool, but I would never use this in a team setting.
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.
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
Isn't this the same as the "holy albatross" pattern and variants "unholy" and "devil"
05:20 are outer parentheses in line 14 needed?
This video is amazing 🔝
Do you have a Udemy course?
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)
);
Wouaou so great!!!
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!
Awesome
this is super cool, i hate media queries, ill use this instead
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.
I agree
You know what was hard to maintain? building layouts with floats and having browser incompatibility. This is a breeze.
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!
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 :)
@@KevinPowell yes, I watched the video in full after adding my comment... very cool.
king
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.
M * X dont need to be wrapped like (M * X) your big calc does the latter..
Super calculation, but its difficult for me
It looks like a cool thing that you shouldn't use anywhere other than your own projects.
Lots of math creating the variables. I'll wrap my head around that
/* Again, there is a simple solution to explaining any complicated parts of CSS. */
good to know but definitely NOT gonna use it in production
People who call those beautiful solutions hacks should go back in time twenty something years and try coding for IE 5.5 for Mac 😅
it's just css's of scripting(functions
)
I'd rather stick with media queries. This seems too complicated, and I don't see any potential benefits over @media.
my head hurts
I replaced
flex-basis: calc(((var(--main-min-width) - (100% - var(--sidebar-size) - var(--gap))) * 9999));
width this one:
flex-basis: var(--main-min-width);
and it worked the same!
Is there any difference in work?
Hi...
Don’t watch this if you’re on your first week into css.
css is becoming more and more programming language😅
This is way over complicated