100% Agreed. For example when I need some tutorial in JS or React I search for random people but when it comes to CSS I know one place for sure it is this channel. Thank you Kevin for the job that you do for us 🔥🙌🏼
Kevin, I just discovered you a few weeks ago and have been watching like crazy. I needed something just like this for a project I am working on this weekend. Perfect timing, happy new year!
Man, you truly are a dev hero!! It feels weird that a couple months ago I didn't know about your channel, and now I'm trying hard not to miss any of your videos. Also, double thanks for letting us know more about css-grid.
Yes! Please do a video on optimization. I spend so much time trying to optimize, making different sizes for the same img, etc., that I’m sure there is an easier way. Thanks for all you do, Kevin.
I am doing my homework and was stuck with the grid layout for the whole day, and then, I found your video! definitely saved me! thank you so much for this fantastic video.
I subbed to your channel the moment I started watching some of your other videos. I must say you are a true master of CSS, but the thing that's so strikingly humorous and fun for me is the continual "we're going to fix that!" in your videos. I love how fun you make it and it's so refreshing to be able to chuckle and know that no matter how many times you break something for the sake of a good tutorial, it's going to get fixed; because you're a master of your craft. Thanks for making learning fun!
I've watched so many of your videos now and with each new video I watch I keep thinking of how much I learn from you. Kevin, you're amazing. Please keep doing what you're doing.
Kevin, first of all congratulations on your amazing work with your RUclips channel and your courses elsewere, you are an amazing teacher. On with my question now, where did you got this T-shirt, I want one too!
man, nowadays is so easy to develop good looking website.. back then when im actively working as web dev, i still remember that designer need to use `table` to create some sort of layout.. then come along `float` that make everything much easier.. `grid` is even easier to use..
To fix the grid on mobile, I usually wrap the display:grid in a min-width: 400px media query so the minmax() function won’t break the design on extra small screens. I won’t use multiple columns on small screens, so display block works just fine.
Great demo. Thanks for creating it! One thing I noticed is that you're using an h2 but no h1, which is a bad thing for accessibility, since it breaks the semantic hierarchy of headings. If there's only one level of heading on your page, it should always be h1, and you can style that to be whatever size you want. If you're assuming that there would be an h1 above the grid on a "real page", then it would be helpful to say so explicitly, so that your viewers don't accidentally pick up practices that harm accessibility.
Kevin has done at least one other video about semantic hierarchy so there's really no need for him to address something that's part of the bigger picture and would take away from what he wants to cover in this particular tutorial.
Thanks for another great video. I wonder if you could make a video concerning the sizes / break points for different screens, there is so much information on the net, yet non of it is consistent and gets very confusing. Happy New Year and stay safe.
I’m not a mathematician, and this could be a happy coincidence, but in regards to the 1.25 aspect ratio on the feature card image - because the card is spanning the height of two cards, and the card aspect ratio is 1.5, I believe to calculate the correct aspect ratio would be the difference (0.5) to the power of the span (2). So (0.5)^2 would be 0.25, which is what you’ve put. I’m on mobile and haven’t tested this yet with other sizes, so I have no idea if this theory holds up lol.
@@LunaFolf I did that maths kind of in the other way around. Since the big card takes up 2 columns, the aspect ratio is essentially is two units of length (let's call them fr as it's kind of similar), while the smaller cards is one unit of width. That gives us: 2fr*1.25 = 2.5fr and 1.5fr + 1fr = 2.5fr So 2fr * 1.25 = 2.5fr = 1.5fr + 1fr
One way to fix the issue with grid-template-columns breaking the layout at small sizes it to use for e.g: minmax( min(15rem, 100%), 1fr ) This way the minimum column size won't overflow even att screen sizes smaller than 15rem.
Is there some way in just CSS to take a random assortment of different aspect ratio image and realign them so that they are properly spaced apart with no dead space? Like take 4 square images and one tall image and having the tall image automatically span 2 rows height creating an even layout? Hard to explain in text.
Great lesson, never used it like this before, really thank you Kevin. I have one question. What if I have two grids on top of each other, and each one has its own cards within it, how to make the same width for all the cards in the two sets?
I have a question, when you creating a layout do you practice this before you start the vlog or do you do this on the spot? Thanks im a new subscriber and i love your tutorials specially css grid.
@Kevin Powell Hi, love the tutorial, what key combination are you using to select next occurrences? i herd crl+d but when i use the same combination it selects all instances with "card-xyz" not just the
I've gone brain dead. In a responsive grid with an odd numbered equal sized "cards" or divs, when the screen begins to get smaller and the cards shift to a new row how can you make that or those cards become centered rather than justified left? Thanks in advance. Great video. I've learned a great deal from you.
this is the layout that I've wanted for my clothing store - because it's got a comic book style and that's the sort of timid approach to anarchy that I am comfortable doing. And it looks so good! But then I also managed to break something, I was putting it all together on a 2560 x 1289 monitor and I started fiddling with the grid size & aspect ratio until it stopped looking bloated, then I uploaded to check it on my ancient oneplus (6 I think) phone, looks great. smaller iPhone 12 looks even better! - but then It gets messed up on the iPad AIR at 820 width because it pulls the card content div 100% on top of the image. I am super scared of fiddling with it any more because on an iPad Pro it looks perfect at both 1024 & 1366. How far do you go for perfection? I wish I was more confident and could hold knowledge the way you do, you make it look so easy!
hello kevin im a beginner in this field when i saw the predefined ccs rules im really confused because there are alot of things i dont know and didnt use
ok learnt you can declare both grid-template-columns and grid-template-rows at the same time, cool Get both rows and columns setup gives more grid-area control, cool
I'm a big fan of your tutorials and I like the way you handle css, but I get a little frustrated about semantic. For instance, when you create a card, shouldn't you be using figure, img and figcaption ? I think it'd be more efficient as far as accessibility is concerned, am I wrong ?
great course i sometimes when i use grids and creat a cards layout i ancounter a card that dont have a picture and that ruins the overall style of cards is there a way to make the text and button maybe to be always at the bottom regardless if the card have a picture or not
Is there a way to use grid-template-columns auto-fit with a px min value and a max amount of columns? Say I wanna push columns to the next row if they don't fit but I don't wanna have more than 4 columns (even if a fifth one fits)
@@KevinPowell I actually figured it out! This is what I did: .grid{ --gap: 20px; --max-cols: 4; --min-col-width: 150px; --grid-cols-min: max( var(--min-col-width) , calc( (100% / var(--max-cols) ) - (var(--gap) * (var(--max-cols) - 1) / var(--max-cols) ) ) ); //explanation below display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax( var(--grid-cols-min,0), 1fr ) ); } //explanation max( var(--min-col-width), calc( 100% / var(--max-cols) ); //this would have been enough if it wasn't because of the GAP. That's why I needed the other part. //if I have 4 columns, that means I have 3 gaps, and thats what the calc() does.
Hi Kevin, could you please make a video about Tailwind? Seen many positive comments + approach combining it with PostCSS (supposedly to help with the "class mess" / to create semantic classes. Also what are the pros and contras compared to e.g. SCSS. 🙏
@@KevinPowell You also could trash it haha. Just to get an idea of how it compares. Some of us hear about it constantly and don't know it so it would be interesting. But totally fine if you don't!
(?) You know difference between { padding-inline-start and padding-left } hard to find difference maybe related to { writing-mode } can you help a little
Kevin is best CSS teacher on RUclips. Period. It's an absolute delight watching his videos and you learn so much :)
AGREED!! I would probably have to stop my web development without his css help lol!
100% Agreed. For example when I need some tutorial in JS or React I search for random people but when it comes to CSS I know one place for sure it is this channel. Thank you Kevin for the job that you do for us 🔥🙌🏼
By far! I found him on a css battle video and Ive learned more from him than I have in school.
Kevin, I just discovered you a few weeks ago and have been watching like crazy. I needed something just like this for a project I am working on this weekend. Perfect timing, happy new year!
Welcome aboard! Glad that you're enjoying my content!
Ahh hh hum hh
Man, you truly are a dev hero!!
It feels weird that a couple months ago I didn't know about your channel, and now I'm trying hard not to miss any of your videos. Also, double thanks for letting us know more about css-grid.
Yes! Please do a video on optimization. I spend so much time trying to optimize, making different sizes for the same img, etc., that I’m sure there is an easier way. Thanks for all you do, Kevin.
The full outline of how to really use aspect-ratio makes me really happy.
I am doing my homework and was stuck with the grid layout for the whole day, and then, I found your video! definitely saved me! thank you so much for this fantastic video.
No doubt about it, every time i have struggled with css, this is the place to come. thanks a lot.
I subbed to your channel the moment I started watching some of your other videos. I must say you are a true master of CSS, but the thing that's so strikingly humorous and fun for me is the continual "we're going to fix that!" in your videos. I love how fun you make it and it's so refreshing to be able to chuckle and know that no matter how many times you break something for the sake of a good tutorial, it's going to get fixed; because you're a master of your craft. Thanks for making learning fun!
Kevin - dude, you are simply an amazing teacher - thank you so much for all your hard work - cannot wait to see what this year brings
I've watched so many of your videos now and with each new video I watch I keep thinking of how much I learn from you. Kevin, you're amazing. Please keep doing what you're doing.
You're truly the best. Bingeing your channel for the past few months. Sincerely, thank you!!!
Cant describe what you have openned my eyes, Kevin!!! Thank you so so so much!!!
Love the video. I never really knew the ins and outs of grid. You nailed it. Thanks, Kev.
Awesome, dude. Love the video. I had forgotten grid structuring in css and I love your explanations best. I'm going to watch your other stuff as well.
Seeing you so happy with grid makes me so happy :)
Great video!
One of the best teachers I've seen
I'm a bit late with this but thanks Kevin I've just finished a big real world project for a client and this video nailed it for me!
Thank you! Now I know grid-template-columns: repeat(auto-fit, minmax(x,y)) and aspect ratio better.
Kevin, I cannot thank you enough for all this wonderful knowledge that you’ve shared. You have helped me become such a better programmer. Thank you!!!
😮Just discovered o haven't subscribed after week of watch your tuitorials, Kelvin you're a saviour to we beginners
bro, you are awesome! I recently started building responsive pages and this video helped me alot! thank you
man, these videos are amazing. I thought I was a master at css grid but still learned a few new things in this video
Thank you Kevin, your channel is a web tool. Always learning new things from you
Nice tutorial worked perfectly for creating a home page of apps
This video was exactly what i was searching for😆
Thanks for the grid lesson Kevin. Help me so much 🙏🏼
Kevin, wish you all the best!
Kevin, first of all congratulations on your amazing work with your RUclips channel and your courses elsewere, you are an amazing teacher. On with my question now, where did you got this T-shirt, I want one too!
Thank you so much Sir for this tutorial, it saved my life.❤❤❤❤❤
I’m always watch your videos whatever that you’re providing , I hope you always be continued we love your videos and the way that you coding ❤️❤️
Thanks Mahmoud! I've got no plans to stop anytime soon!
Hands down for this legend 🙏🏻💯🙌
That was great. You have also focused on Aspect Ratio as well. Especial thanks for that.
man, nowadays is so easy to develop good looking website.. back then when im actively working as web dev, i still remember that designer need to use `table` to create some sort of layout.. then come along `float` that make everything much easier.. `grid` is even easier to use..
Merry Christmas, Kevin
one of the best videos I have ever seen
С рождеством и наступающим Новым годом Кевин ! Крепкого здоровья Вам и вашей семье ! Спасибо за уроки )С наилучшими пожеланиями !!! 👍👍👍🎅🐯🌲💥💥💥
Love all your videos, Im creating my own site and you help me out a lot!
So much excellent information here. Thanks!
To fix the grid on mobile, I usually wrap the display:grid in a min-width: 400px media query so the minmax() function won’t break the design on extra small screens. I won’t use multiple columns on small screens, so display block works just fine.
Hey Kevin your videos are awesome, thank you so much!
Kevin, thank you for the wonderful tutorial ❤️ You make me dominate my colleagues when it comes to CSS :D
Very helpful guide! Thank you
Thanks!
Thanks so much Philip!
Whoa! Awesome, Philip, thank you from the whole community :)
Just great vid :) Very useful and clear
Awesome! Thank you Kevin!
Thanks for make this awesome video🔥🔥
El primer video que veo en 2022 :D thanks!
Amazing Teacher!!!
Grazie.
This tutorial is helpful ❤
really nice video, i like ur content, we all need this to be better
This is soooooo AWESOME 🤩🤩🤩🤩🤩
My favorite developer. 🤗
Great demo. Thanks for creating it!
One thing I noticed is that you're using an h2 but no h1, which is a bad thing for accessibility, since it breaks the semantic hierarchy of headings.
If there's only one level of heading on your page, it should always be h1, and you can style that to be whatever size you want.
If you're assuming that there would be an h1 above the grid on a "real page", then it would be helpful to say so explicitly, so that your viewers don't accidentally pick up practices that harm accessibility.
Kevin has done at least one other video about semantic hierarchy so there's really no need for him to address something that's part of the bigger picture and would take away from what he wants to cover in this particular tutorial.
Thanks for another great video. I wonder if you could make a video concerning the sizes / break points for different screens, there is so much information on the net, yet non of it is consistent and gets very confusing. Happy New Year and stay safe.
Thnks a lot for this, ur the best!
so simple, so clean, so nice :)
I’m not a mathematician, and this could be a happy coincidence, but in regards to the 1.25 aspect ratio on the feature card image - because the card is spanning the height of two cards, and the card aspect ratio is 1.5, I believe to calculate the correct aspect ratio would be the difference (0.5) to the power of the span (2).
So (0.5)^2 would be 0.25, which is what you’ve put.
I’m on mobile and haven’t tested this yet with other sizes, so I have no idea if this theory holds up lol.
what span mean in aspect ratio or grid? is the font-size?
@@The-Dev-Ninja I was referring to the grid column and grid row span
@@LunaFolf
I did that maths kind of in the other way around. Since the big card takes up 2 columns, the aspect ratio is essentially is two units of length (let's call them fr as it's kind of similar), while the smaller cards is one unit of width. That gives us: 2fr*1.25 = 2.5fr
and 1.5fr + 1fr = 2.5fr
So 2fr * 1.25 = 2.5fr = 1.5fr + 1fr
Thanks, this is super useful!
WOW , Thats great video man
Another great one
One way to fix the issue with grid-template-columns breaking the layout at small sizes it to use for e.g:
minmax( min(15rem, 100%), 1fr )
This way the minimum column size won't overflow even att screen sizes smaller than 15rem.
You said you're moving from BEM. What naming system do you prefer now? Sorry, I'm not an old viewer. And btw, amazing video!
What keyboard are you using? Thanks for teaching us CSS!
That is some of the best most amazing CSS I've ever seen!! Too bad I can't use any of it since I'm learning to code for emails.
Tell us more of the fascinating details of your life.
what would you suggest for styling LOB design using component based frameworks like Blazor, Angular, VUE etc. ?
Mind: Blown 🤯
Is there some way in just CSS to take a random assortment of different aspect ratio image and realign them so that they are properly spaced apart with no dead space? Like take 4 square images and one tall image and having the tall image automatically span 2 rows height creating an even layout? Hard to explain in text.
*firebrick* is the color of the month 🎅
Great lesson, never used it like this before, really thank you Kevin.
I have one question. What if I have two grids on top of each other, and each one has its own cards within it, how to make the same width for all the cards in the two sets?
I have a question, when you creating a layout do you practice this before you start the vlog or do you do this on the spot?
Thanks im a new subscriber and i love your tutorials specially css grid.
great point thank you Kevin !
@Kevin Powell Hi, love the tutorial, what key combination are you using to select next occurrences? i herd crl+d but when i use the same combination it selects all instances with "card-xyz" not just the
First you need to select the card then keep on hitting ctrl + D to select all card classes
I've gone brain dead. In a responsive grid with an odd numbered equal sized "cards" or divs, when the screen begins to get smaller and the cards shift to a new row how can you make that or those cards become centered rather than justified left? Thanks in advance. Great video. I've learned a great deal from you.
this is the layout that I've wanted for my clothing store - because it's got a comic book style and that's the sort of timid approach to anarchy that I am comfortable doing. And it looks so good! But then I also managed to break something, I was putting it all together on a 2560 x 1289 monitor and I started fiddling with the grid size & aspect ratio until it stopped looking bloated, then I uploaded to check it on my ancient oneplus (6 I think) phone, looks great. smaller iPhone 12 looks even better! - but then It gets messed up on the iPad AIR at 820 width because it pulls the card content div 100% on top of the image. I am super scared of fiddling with it any more because on an iPad Pro it looks perfect at both 1024 & 1366. How far do you go for perfection? I wish I was more confident and could hold knowledge the way you do, you make it look so easy!
hello kevin im a beginner in this field when i saw the predefined ccs rules im really confused because there are alot of things i dont know and didnt use
Awesome!!! You ROCK!! :)
Grid area's is my thing now
ok learnt you can declare both grid-template-columns and grid-template-rows at the same time, cool
Get both rows and columns setup gives more grid-area control, cool
I'm a big fan of your tutorials and I like the way you handle css, but I get a little frustrated about semantic.
For instance, when you create a card, shouldn't you be using figure, img and figcaption ?
I think it'd be more efficient as far as accessibility is concerned, am I wrong ?
great course
i sometimes when i use grids and creat a cards layout i ancounter a card that dont have a picture and that ruins the overall style of cards
is there a way to make the text and button maybe to be always at the bottom regardless if the card have a picture or not
With this approach that would happen, with how I've set up the alignment of the content.
@@KevinPowell i ll try it on my project thanks for the great content
there ought to be a flow diagram that explains when to use flexbox over css grid
Grid isn't supported in ie10 and 11 though? How can we cater for these browsers?
why would you put container in rem values?
Does repeat(auto-fit,minmax(15rem, 1fr)); removes necessity for @media (min-width:...) ?
For some layouts, it sure does :). We still need media queries, but not as much as we used to.
What does API by day, IPA by night mean? Just curious.
APIs are used in development, and IPAs are a type of beer 🙂
@@KevinPowell 😂😂😂
Is there a way to use grid-template-columns auto-fit with a px min value and a max amount of columns? Say I wanna push columns to the next row if they don't fit but I don't wanna have more than 4 columns (even if a fifth one fits)
using minmax(100px,25%) with GAP makes the last column NOT to fit (and leaving a weird empty space)
No way to limit the total columns, other than limiting the width of the grid container.
@@KevinPowell I actually figured it out!
This is what I did:
.grid{
--gap: 20px;
--max-cols: 4;
--min-col-width: 150px;
--grid-cols-min: max( var(--min-col-width) , calc( (100% / var(--max-cols) ) - (var(--gap) * (var(--max-cols) - 1) / var(--max-cols) ) ) ); //explanation below
display:grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fill, minmax( var(--grid-cols-min,0), 1fr ) );
}
//explanation
max( var(--min-col-width), calc( 100% / var(--max-cols) );
//this would have been enough if it wasn't because of the GAP. That's why I needed the other part.
//if I have 4 columns, that means I have 3 gaps, and thats what the calc() does.
Excellent thanks
I liked the video, it is very useful. Is there a video that explains the units of measurement in css like rem px.........
ruclips.net/video/N5wpD9Ov_To/видео.html 😁
@@KevinPowell Thank you 😁😁😁😁😁😁
Hi Kevin, could you please make a video about Tailwind? Seen many positive comments + approach combining it with PostCSS (supposedly to help with the "class mess" / to create semantic classes. Also what are the pros and contras compared to e.g. SCSS. 🙏
I'm not a big fan of Tailwind, so no plans for content on it 🙂
@@KevinPowell You also could trash it haha. Just to get an idea of how it compares. Some of us hear about it constantly and don't know it so it would be interesting. But totally fine if you don't!
(?) You know difference between
{ padding-inline-start and padding-left }
hard to find difference maybe related to { writing-mode } can you help a little
Hahaha the laugh after the magic numbers, he knows
Love you Kevin 🤗🇧🇩
Thanks ❤
Awesome!
Beautiful
Thank you!
Idk why but watching this whole video was Oddly Satisfying...
i don't think you need aspect ratio here
you can just use height: calc(100% - 1em) or something like that
Are those Sennheiser 560s?
I forget the model as I'm not on my computer right now, but that sounds right 🙂
22:41 card featured