Learn how to create a responsive CSS grid layout

[@nielslytzdk]

Kevin is best CSS teacher on KZbin. Period. It's an absolute delight watching his videos and you learn so much :)

[@Allformyequine]

AGREED!! I would probably have to stop my web development without his css help lol!

[@webdev_am]

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 🔥🙌🏼

[@westonjp612]

By far! I found him on a css battle video and Ive learned more from him than I have in school.

[@bobmarteal]

The full outline of how to really use aspect-ratio makes me really happy.

[@iLikeMyOwnPosts]

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!

[@KevinPowell]

Welcome aboard! Glad that you're enjoying my content!

[@fernando-2160]

Ahh hh hum hh

[@hcf797]

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.

[@WellSaint001]

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.

[@aaroonplay1993]

No doubt about it, every time i have struggled with css, this is the place to come. thanks a lot.

[@helenahan3628]

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.

[@asyncawaited]

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!

[@johny962]

Thank you! Now I know grid-template-columns: repeat(auto-fit, minmax(x,y)) and aspect ratio better.

[@jaydenmoon1165]

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

[@outpost31737]

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!

[@vasyaqwe2087]

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.

[@melbazany7417]

You're truly the best. Bingeing your channel for the past few months. Sincerely, thank you!!!

[@CrazyCodingChannel]

One of the best teachers I've seen

[@tedbailey6530]

Love the video. I never really knew the ins and outs of grid. You nailed it. Thanks, Kev.

[@ngocanha85]

Cant describe what you have openned my eyes, Kevin!!! Thank you so so so much!!!

[@junkboxrobots3309]

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.

[@patunolaibukun2506]

😮Just discovered o haven't subscribed after week of watch your tuitorials, Kelvin you're a saviour to we beginners

[@LogicalAmericanMuslim]

bro, you are awesome! I recently started building responsive pages and this video helped me alot! thank you

[@ricardodesirat2590]

Seeing you so happy with grid makes me so happy :) Great video!

[@diviagency7532]

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.

[@davidsonfong9549]

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

[@lokecrafter7055]

Nice tutorial worked perfectly for creating a home page of apps

[@harshilmaheriya6374]

Hands down for this legend 🙏🏻💯🙌

[@broadshare]

Thank you Kevin, your channel is a web tool. Always learning new things from you

[@inweblife]

Kevin, wish you all the best!

[@AlokPrasad-q5w]

This video was exactly what i was searching for😆

[@Corvinade]

man, these videos are amazing. I thought I was a master at css grid but still learned a few new things in this video

[@riyatiwari7178]

Thank you so much Sir for this tutorial, it saved my life.❤❤❤❤❤

[@_slier]

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

[@rezarahman1782]

That was great. You have also focused on Aspect Ratio as well. Especial thanks for that.

[@jeffreyhendrikfrans1479]

Thanks for the grid lesson Kevin. Help me so much 🙏🏼

[@mahmoud-bakheet]

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 ❤️❤️

[@KevinPowell]

Thanks Mahmoud! I've got no plans to stop anytime soon!

[@VladimirosJohanson]

Kevin, first of all congratulations on your amazing work with your KZbin 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!

[@m.albehery]

one of the best videos I have ever seen

[@NovaKirsch]

Merry Christmas, Kevin

[@DaveSteinberg]

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.

[@daldreams]

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.

[@marcelopuppio7174]

El primer video que veo en 2022 :D thanks!

[@itzmebzb]

Very helpful guide! Thank you

[@5555Elenka]

С рождеством и наступающим Новым годом Кевин ! Крепкого здоровья Вам и вашей семье ! Спасибо за уроки )С наилучшими пожеланиями !!! 👍👍👍🎅🐯🌲💥💥💥

[@LunaFolf]

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.

[@The-Dev-Ninja]

what span mean in aspect ratio or grid? is the font-size?

[@LunaFolf]

@@The-Dev-Ninja I was referring to the grid column and grid row span

[@bjornbergqvist776]

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

[@zertybee]

Love all your videos, Im creating my own site and you help me out a lot!

[@narayadewe7979]

Amazing Teacher!!!

[@SaleKnezevic]

So much excellent information here. Thanks!

[@petarkolev6928]

Kevin, thank you for the wonderful tutorial ❤️ You make me dominate my colleagues when it comes to CSS :D

[@luisdefreites4596]

Hey Kevin your videos are awesome, thank you so much!

[@Yeldarb1960]

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.

[@badtwin82]

Mind: Blown 🤯

[@not_amanullah]

This tutorial is helpful ❤

[@Zirpho]

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.

[@kribo9604]

Grid area's is my thing now

[@kribo9604]

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

[@assoftTR]

Awesome! Thank you Kevin!

[@norvisnorvis7592]

My favorite developer. 🤗

[@MyDpop]

*firebrick* is the color of the month 🎅

[@jonathonkiner7415]

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.

[@Killyspudful]

Tell us more of the fascinating details of your life.

[@_loss_]

Another great one

[@shinmini99]

Thanks for make this awesome video🔥🔥

[@ArchAid1]

This is soooooo AWESOME 🤩🤩🤩🤩🤩

[@MartynKoi]

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.

[@ACharlar22]

Thnks a lot for this, ur the best!

[@Mast3rDesign]

Just great vid :) Very useful and clear

[@daldreams]

Awesome!!! You ROCK!! :)

[@aryan7069_]

WOW , Thats great video man

[@ichhabahnung]

so simple, so clean, so nice :)

[@radomirmijovic2605]

What keyboard are you using? Thanks for teaching us CSS!

[@joelincz8314]

Thanks, this is super useful!

[@TheBorninmotion]

great point thank you Kevin !

[@punkmonkeyKenpo]

what would you suggest for styling LOB design using component based frameworks like Blazor, Angular, VUE etc. ?

[@starsabove]

Thank you!

[@lenarnie2973]

really nice video, i like ur content, we all need this to be better

[@ՀայկԽաչատրյան-ը2խ]

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!

[@emmyleke7049]

Beautiful

[@wwhill8033]

Excellent thanks

[@not_amanullah]

Thanks ❤

[@philkewley]

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!

[@magicsoka]

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?

[@ahsath]

Hahaha the laugh after the magic numbers, he knows

[@hani4239]

Idk why but watching this whole video was Oddly Satisfying...

[@bokistotel]

Does repeat(auto-fit,minmax(15rem, 1fr)); removes necessity for @media (min-width:...) ?

[@KevinPowell]

For some layouts, it sure does :). We still need media queries, but not as much as we used to.

[@zbigniewiksinski]

why would you put container in rem values?

[@AWM_2023]

Grazie.

[@rproctor83]

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.

[@johnpauldelacruz5261]

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.

[@strelock-youssef]

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

[@KevinPowell]

With this approach that would happen, with how I've set up the alignment of the content.

[@strelock-youssef]

@@KevinPowell i ll try it on my project thanks for the great content

[@talinwind]

damn! I have to remember all that ...

[@Oluz1975]

@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

[@techjavaid6177]

First you need to select the card then keep on hitting ctrl + D to select all card classes

[@bluesky-vc3tk]

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

[@raj080288]

Grid isn't supported in ie10 and 11 though? How can we cater for these browsers?

[@jamisonr]

Around @29:20, you talk about using "em" in media queries and it was because of specific behavior in Safari that "could be fixed soon", but I notice in more recent videos, you still use em. I'm curious if Safari didn't fix the issue, or they did and there are other reasons to still use em in media queries? Perhaps just habit and preference?

[@KevinPowell]

Now it's just habit, Safari fixed it one or two versions ago 😊

[@pedro2lavega]

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 ?

[@Tomtoptuts]

Love you Kevin 🤗🇧🇩

[@gestaltlabart]

Awesome!

[@nomadshiba]

i don't think you need aspect ratio here you can just use height: calc(100% - 1em) or something like that

[@asdfafafdasfasdfs]

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]

I'm not a big fan of Tailwind, so no plans for content on it 🙂

[@asdfafafdasfasdfs]

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

[@johnnydragovic6892]

I liked the video, it is very useful. Is there a video that explains the units of measurement in css like rem px.........

[@KevinPowell]

kzbin.info/www/bejne/hGbaoXdvhNuSitE 😁

[@johnnydragovic6892]

@@KevinPowell Thank you 😁😁😁😁😁😁

[@lapridagaspar]

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)

[@lapridagaspar]

using minmax(100px,25%) with GAP makes the last column NOT to fit (and leaving a weird empty space)

[@KevinPowell]

No way to limit the total columns, other than limiting the width of the grid container.

[@lapridagaspar]

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

[@narayadewe7979]

22:41 card featured

[@PhilipJones]

Thanks!

[@KevinPowell]

Thanks so much Philip!

[@iLikeMyOwnPosts]

Whoa! Awesome, Philip, thank you from the whole community :)

[@michalnowak2181]

thx

[@karuheine1152]

What does API by day, IPA by night mean? Just curious.

[@KevinPowell]

APIs are used in development, and IPAs are a type of beer 🙂

[@karuheine1152]

@@KevinPowell 😂😂😂