Learn how to create a responsive CSS grid layout
HTML-код
- Опубликовано: 2 июн 2024
- A look at how we can make a dynamic, responsive grid using CSS, along with a dive into properties l like aspect-ratio, object-fit, and more.
🔗 Links
✅ The GitHub repo: github.com/kevin-powell/dynam...
✅ Andy Bells CSS reset: piccalil.li/blog/a-modern-css...
✅ My Emmet video: • Use Emmet to up your H...
✅ The easy way to get started with CSS grid: • Learn CSS Grid the eas...
✅ About object-fit: • How to use CSS object-...
✅ Auto-fit vs Auto-fill: • The magic of auto-fit ...
✅ More about aspect-ratio: • Chrome 88 adds aspect-...
⌚ Timestamps
00:00 - Introduction
01:01 - Writing the HTML
04:57 - Setting up a basic grid
06:39 - Styling the cards
07:23 - Using aspect-ratio on the images
10:03 - Stacking content with grid
13:01 - Styling the card content
14:03 - Adding aspect-ratio to the cards
18:52 - Making the grid dynamic with auto-fit
22:31 - Creating a featured card
25:59 - Styling the featured card
28:49 - Fixing things for small screens
#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 RUclips 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!
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
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.
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 - dude, you are simply an amazing teacher - thank you so much for all your hard work - cannot wait to see what this year brings
Love the video. I never really knew the ins and outs of grid. You nailed it. Thanks, Kev.
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 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, 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!!!
No doubt about it, every time i have struggled with css, this is the place to come. thanks a lot.
man, these videos are amazing. I thought I was a master at css grid but still learned a few new things in this video
Cant describe what you have openned my eyes, Kevin!!! Thank you so so so much!!!
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.
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.
You're truly the best. Bingeing your channel for the past few months. Sincerely, thank you!!!
Seeing you so happy with grid makes me so happy :)
Great video!
😮Just discovered o haven't subscribed after week of watch your tuitorials, Kelvin you're a saviour to we beginners
Thank you Kevin, your channel is a web tool. Always learning new things from you
Thanks for the grid lesson Kevin. Help me so much 🙏🏼
С рождеством и наступающим Новым годом Кевин ! Крепкого здоровья Вам и вашей семье ! Спасибо за уроки )С наилучшими пожеланиями !!! 👍👍👍🎅🐯🌲💥💥💥
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!
One of the best teachers I've seen
That was great. You have also focused on Aspect Ratio as well. Especial thanks for that.
Love all your videos, Im creating my own site and you help me out a lot!
So much excellent information here. Thanks!
Very helpful guide! Thank you
Thank you! Now I know grid-template-columns: repeat(auto-fit, minmax(x,y)) and aspect ratio better.
bro, you are awesome! I recently started building responsive pages and this video helped me alot! thank you
Hey Kevin your videos are awesome, thank you so much!
Nice tutorial worked perfectly for creating a home page of apps
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!
Kevin, wish you all the best!
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 🙏🏻💯🙌
Awesome! Thank you Kevin!
Merry Christmas, Kevin
one of the best videos I have ever seen
Thank you so much Sir for this tutorial, it saved my life.❤❤❤❤❤
so simple, so clean, so nice :)
Just great vid :) Very useful and clear
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.
Amazing Teacher!!!
Thanks, this is super useful!
WOW , Thats great video man
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.
Thanks for make this awesome video🔥🔥
great point thank you Kevin !
Thnks a lot for this, ur the best!
This tutorial is helpful ❤
Another great one
really nice video, i like ur content, we all need this to be better
El primer video que veo en 2022 :D thanks!
Awesome!!! You ROCK!! :)
My favorite developer. 🤗
Mind: Blown 🤯
This is soooooo AWESOME 🤩🤩🤩🤩🤩
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.
Excellent thanks
Thank you!
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?
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..
Beautiful
Awesome!
@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
Thanks ❤
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!
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.
Love you Kevin 🤗🇧🇩
what would you suggest for styling LOB design using component based frameworks like Blazor, Angular, VUE etc. ?
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.
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!
Grazie.
Thanks!
Thanks so much Philip!
Whoa! Awesome, Philip, thank you from the whole community :)
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
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.
What keyboard are you using? Thanks for teaching us CSS!
*firebrick* is the color of the month 🎅
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
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.
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 ?
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
Thank you for the awesome videos. I am working to create a bookmark manager and also a note-taking web app. Do we have any videos on how to fill a form and get that to display on my web app? Thanks
I don't, sorry!
It's ok. You are already awesome.
thx
damn! I have to remember all that ...
Hahaha the laugh after the magic numbers, he knows
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?
Now it's just habit, Safari fixed it one or two versions ago 😊
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!
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 😁😁😁😁😁😁
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
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.
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.
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.
why would you put container in rem values?
Nice shirt!!!!
(?) You know difference between
{ padding-inline-start and padding-left }
hard to find difference maybe related to { writing-mode } can you help a little
Idk why but watching this whole video was Oddly Satisfying...
Grid isn't supported in ie10 and 11 though? How can we cater for these browsers?
What does API by day, IPA by night mean? Just curious.
APIs are used in development, and IPAs are a type of beer 🙂
@@KevinPowell 😂😂😂
22:41 card featured