Easier layouts with these 3 Grid tips
Vložit
- čas přidán 1. 06. 2024
- A look at three simple tips to using CSS grid. If you are just starting out with grid, you might want to start here: • Get started with grid ...
🔗 Links
✅ Advanced selectors: • Step up your CSS game ...
✅ Getting started with Grid: • Get started with grid ...
✅ Horizontal media scroller with Grid: • Create a horizontal me...
✅ Netflix carousel UI clone: • Can I create Netflix’s...
⌚ Timestamps
00:00 - Introduction
00:32 - Prevent overflows when using minmiax()
04:06 - Using auto-flow
06:35 - Stacking content
#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 CZcams 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!
I'm doing a Landing Page with Grid and Flex for my CZcams channel and this sure video can refresh my memory. Thanks Kevin 😊
You are a hero Kevin ! I have just started to learn to use grid and i was so annoyed with grid-template-columns:repeat(auto-fit, minmax(500px, 1fr)) that it cannot get smaller than 500px so the content will overflow. Your solution is awesome ! Thank you !!!
I was given a new design a few weeks ago, with specific column layouts at different breakpoints for different sections. I primarily used grid to control it all, and it worked so much better than flex box with a bunch of margins/padding.
It's been years since I used Grid. I like to use Flexbox because is simpler than Grid, but with grid you can do complex designs writing less css
@@ark333 main problem with flexbox is it is hard to make reusable code (mainly for medium to large sites) because often times at places in css we might be using width instead of flex-basis
It always a total joy to watch your tutorials. You make it all look so simple and even fun 👌
Whoa. The 3rd trick blew my mind. Very clever use of CSS Grid! I've always disliked using position and transform/translate to accomplish this because it can be really finicky sometimes.
I love your videos man, they're always so useful and incredibly well explained.
You save my life as a front-end dev. Thank you!
Thanks for sharing these tips Kevin. It's very useful in my opinion. I'm really excited for what you do here. Brilliant Job 💪💪💪
I just wanted to take a sec to say thank you for all of the great content you've put out there. I just started my first front-end developer job recently and this channel has been a life saver. Thanks so much!
As always top quality videos!
Really useful tips that I will use right away.
Thanks for the content
Very cool tricks. Especially with the min function. We love you Kevin.
THE LAST TRICK IS. A. BIG. HELP!! I was struggling about background images and this is exactly what I need
Very useful tips, thanks Kevin!
This series is a very intelligent decision for beginner in grid ... like me !
These are great tips! Thanks for sharing ☺️
This is so useful...
Thought that it couldn't' be done without a media query.
Thanks again!
Good vid Kevin!
Always learn new from every video.
That last one is so much better than using positioning to get a background image.
So beauty, I want to learn this
The first selector is basically a regex but to be honest this the first I know you could do something like this, great video BTW.
OOOO So nice, i understand now, how it works, thanks
perfect! Thank you
Outstanding!
noice, this min in minmax is super awesome
I'm late to the grid party but I'm glad I hopped on! Some things easier than using flexbox
More grid stuff would be cool! Even easier videos for relating common flex tasks to grid tasks.
Great video. I wouldn't recommend using the global selector as well as z-index -1 since it pushes the image behind the parent. However, the tips are great. Thank you.
Awesome ❤️
awesome!
Alright man, you've convinced me: grid is awesome; I'll stop using flex box for everything now...
Both has their use cases. You can't just abandon flex😅
@@siddiqahmed3274 Right on.
I did specify not using flex "for everything".
ok recently i have been working on site and I have been avoiding using the @media queries or break points because they're not consistent.
anyway i have been making a navbar and i needed a way to move the navbar to side an open it on a toggle of a button. i did the toggle with js but it can easily be done with checkbox or tabindex too.
so i realized main thing i needed to do was when navigation items doesn't fit to a single line, toggle button should show up and items should become hidden.
so i made nav element a flex box that can wrap and made it overflow hidden.
and i gave the toggle button max-width which is the width i want it to have. and gave it aspect ratio 1/1 of course.
then i gave it min-width of 1px. and flex-grow of 1.
so when items doesn't fit anymore they get wrapped on wrap toggle buttons content box fills the space.
and items become invisible because they overflow.
and on toggle i just make a full screen menu
Excellent practical video, so well explained, so thank you! I never thought about implementing a background image in this way. You touched on accessibility, but are there any other trade offs or considerations between keeping an image in the DOM vs setting it with CSS?
Hi Adam, keeping an image in the DOM means you can easily update it through eg. a cms platform. Whereas if you declare it in the CSS file, then it would be quite tricky for a content editor to update it.
Thank you for these amazing tips Kevin.
I'm wondering about something that sort of relates. I have grid on the UL or container div and wanted to give the LI or inner children multiline underline hover animation, it doesn't actually go under the two lines but only one line unless I disable grid on the parent container. Any way to fix that?
3:55 I tried using this with a layout but ended up using flex because I couldn't work out how to center that "odd-one-out" on larger screens. :) But I'm still learning.
I don't think I saw this anywhere, but is there a vid where you go into how to editorially select how a background image will be placed/centred as the layout changes widths? (ex: I want to keep a person's face 1/3 from the top and 1/3 from the left, but I want to just reveal more of the image on the right side and top, vs a cover effect which would simply resize the whole image).
This should cover that. It's my most in-depth video on background images. czcams.com/video/3T_Jy1CqH9k/video.html
Magic.
Hello, have a nice day.
You too!
@1:01 the attribute selector you use is the * (star) one. If I look at the classes you wanted to target with that selector wouldn’t the ^ (caret) selector be a better fit? To prevent accidentally selecting classes with the string “grid-“ in the middle.
The issue with that one is, of you have multiple classes, the grid- one has to be the first one or it won't work. That's a dealbreaker for me. It does mean that you need to be a little careful in your naming conventions though
@@KevinPowell You're completely right. The "remembering to be careful" strategy is hard for me. So I Googled a bit more and found a solution on Stack Overflow: you can comma-combine both the ^ matching "grid-" and * matching " grid-" (mind the space) which would not match a class name like "foo-grid-bar". It's a bit wordy though.
Hey Kevin, nice vids, would you mind making a video where you do all this kind of stuff but for browser like IE or very old browser.
Thanks
Please don't make me relive those days 😂
Question, how come the W3School article on z-index says "Note: z-index only works on positioned elements and flex items ."? Clearly in Grid you have access to it as well?
Kevin and Kyle are competing for the best pragmatic developer content…. And we’re all winning! 🙌
I assume changing the one piece of code to the following would have also worked? It looks a bit cleaner this way.
[class*=”grid”] {
display: grid;
gap: 1rem;
}
I love your videos Kevin, they're really informative and helpful. However, recently I found myself watching them on 2× speed more often as you sometimes take so long to explain something.
A lot of people say I talk too fast! I think it depends if English is a first language, and how comfortable you are with the subject matter as well. I tend to listen to most YT videos at 1.5=2x as well :)
@@KevinPowell No need to hurry ;) You are awesome!
@@KevinPowell you're doing great. Tutorial videos are better when explained like you do, a more experienced viewer can alwasy skip some bits or speed up the video, it's not really a problem.
What can be achived for the navigation being turned into a burger style with grid?
@Kevin why are you not using Tailwind CSS? That would help so much with focusing only on what's important, instead of figuring what is that fs-900 or fw-bold class. You don't need to teach TW, just use it for things you are not teaching.
But not everyone is using tailwind, so the class names from it are just as vague to people who don't use it?
@@KevinPowell More people understand tailwind than remember what do your custom classes? :D
Can you please clarify, why don't you use "BEM" class names instead of advanced selectors ? I found BEM super useful than complex CSS selectors
What is the shortcut for comments. Very useful video by the way
Ctrl + /. (cmd on mac)
@@KevinPowell Great, learned a lot from your videos. I started from not a lot of knowledge. I have an issue where my website stretches right across my imac's 27" screen. How do I have it conventinal fit. Cheers.
Once a "grider" you never look back 👍
Why do things that have "grid-" classnames get grid + gap automatically?
The [*="grid-"] selector that I showed at near the start of the video selects anything that has a "grid-" in it's classes.
I hated grid, since Kevin I strongly love grid :)
So sad that Safari is the new IE.. Aspect-ratio is one of the coolest new CSS features (since you don't have to do the whole padding percentage with an absolute image magic) but the support is just waaaay too low to be usable in projects for customers :/
I have a challenge for you. Re-create your CZcams video intro by using html and css.
Oh, that could be fun :D
As a beginner Your videos are really really helpful. Thank you so much.
✔
grid > flexbox
First
The above - video = Catholic see - order of budda! No format! Admin in, Win Live!
Easily showed - U didn't load - down load! Oriental Tribes - make any - legal gridz!