@universecode1101 2 жыл бұрын
I'm doing a Landing Page with Grid and Flex for my KZfaq channel and this sure video can refresh my memory. Thanks Kevin 😊
@user-lm1oe9lx2x 2 жыл бұрын
Very cool tricks. Especially with the min function. We love you Kevin.
@windubitably 2 жыл бұрын
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.
@ark333 2 жыл бұрын
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
@kamalsharma2839 2 жыл бұрын
@@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
@skillzorskillsson8228 2 жыл бұрын
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 !!!
@FrankyDeMeyer 2 жыл бұрын
It always a total joy to watch your tutorials. You make it all look so simple and even fun 👌
@jerryleemelton1860 2 жыл бұрын
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!
@alwinter 2 жыл бұрын
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.
@juneldelacuadra5973 2 жыл бұрын
You save my life as a front-end dev. Thank you!
@gopalloharnew5948 2 жыл бұрын
This series is a very intelligent decision for beginner in grid ... like me !
@sinc1802 2 жыл бұрын
THE LAST TRICK IS. A. BIG. HELP!! I was struggling about background images and this is exactly what I need
@379rale 2 жыл бұрын
This is so useful... Thought that it couldn't' be done without a media query. Thanks again!
@mohammedbanani3181 2 жыл бұрын
Very useful tips, thanks Kevin!
@ishaqiqbal5163 2 жыл бұрын
Always learn new from every video.
@fsociety401 2 жыл бұрын
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.
@aldobangun223 2 жыл бұрын
Thanks for sharing these tips Kevin. It's very useful in my opinion. I'm really excited for what you do here. Brilliant Job 💪💪💪
@muundus7 2 жыл бұрын
I love your videos man, they're always so useful and incredibly well explained.
@olgoree 2 жыл бұрын
noice, this min in minmax is super awesome
@Xamy- 2 жыл бұрын
Good vid Kevin!
@MartynMc 2 жыл бұрын
That last one is so much better than using positioning to get a background image.
@lenarnie2973 2 жыл бұрын
OOOO So nice, i understand now, how it works, thanks
@hikari1690 2 жыл бұрын
I'm late to the grid party but I'm glad I hopped on! Some things easier than using flexbox
@bilalekmen4225 2 жыл бұрын
So beauty, I want to learn this
@Yukitocyborg 2 жыл бұрын
As always top quality videos! Really useful tips that I will use right away. Thanks for the content
@Michael-Martell 2 жыл бұрын
More grid stuff would be cool! Even easier videos for relating common flex tasks to grid tasks.
@kevinrobertandrews 2 жыл бұрын
These are great tips! Thanks for sharing ☺️
@jammincoder 2 жыл бұрын
Alright man, you've convinced me: grid is awesome; I'll stop using flex box for everything now...
@siddiqahmed3274 2 жыл бұрын
Both has their use cases. You can't just abandon flex😅
@jammincoder 2 жыл бұрын
@@siddiqahmed3274 Right on. I did specify not using flex "for everything".
@JohnBortins 2 жыл бұрын
Outstanding!
@nikolaypanayotov6941 2 жыл бұрын
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.
@sofian_so 2 жыл бұрын
awesome!
@nomadshiba 2 жыл бұрын
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
@adamjohnantonio 2 жыл бұрын
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?
@aCitizenJOSerased 2 жыл бұрын
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.
@vishalchavda5766 2 жыл бұрын
Awesome ❤️
@emilie1977 2 жыл бұрын
perfect! Thank you
@pwlctk Жыл бұрын
Magic.
@germantoenglish898 2 жыл бұрын
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.
@dakshdas5946 2 жыл бұрын
Hello, have a nice day.
@KevinPowell 2 жыл бұрын
You too!
@e11world 2 жыл бұрын
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?
@andrewliu1191 Жыл бұрын
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?
@oanemizguel 2 жыл бұрын
@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.
@KevinPowell 2 жыл бұрын
But not everyone is using tailwind, so the class names from it are just as vague to people who don't use it?
@oanemizguel 2 жыл бұрын
@@KevinPowell More people understand tailwind than remember what do your custom classes? :D
@octothorpe12 2 жыл бұрын
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).
@KevinPowell 2 жыл бұрын
This should cover that. It's my most in-depth video on background images. kzfaq.info/get/bejne/abqPfdxiqNesaZ8.html
@robertjif6337 2 жыл бұрын
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
@KevinPowell 2 жыл бұрын
Please don't make me relive those days 😂
@80Vikram 2 жыл бұрын
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
@it_is_ni 2 жыл бұрын
@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.
@KevinPowell 2 жыл бұрын
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
@it_is_ni 2 жыл бұрын
@@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.
@brownrhythms 2 жыл бұрын
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; }
@christofferandersen2082 2 жыл бұрын
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 :/
@Tikolu 2 жыл бұрын
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.
@KevinPowell 2 жыл бұрын
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 :)
@Rafiozoo 2 жыл бұрын
@@KevinPowell No need to hurry ;) You are awesome!
@FROZeN_FoCUS 2 жыл бұрын
@@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.
@dave6012 2 жыл бұрын
Kevin and Kyle are competing for the best pragmatic developer content…. And we’re all winning! 🙌
@proteus1 2 жыл бұрын
What can be achived for the navigation being turned into a burger style with grid?
@proteus1 2 жыл бұрын
What is the shortcut for comments. Very useful video by the way
@KevinPowell 2 жыл бұрын
Ctrl + /. (cmd on mac)
@proteus1 2 жыл бұрын
@@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.
@thomasnelson7582 2 жыл бұрын
Why do things that have "grid-" classnames get grid + gap automatically?
@KevinPowell 2 жыл бұрын
The [*="grid-"] selector that I showed at near the start of the video selects anything that has a "grid-" in it's classes.
@sugiii9616 2 жыл бұрын
I hated grid, since Kevin I strongly love grid :)
@pinnaclewd 2 жыл бұрын
Once a "grider" you never look back 👍
@heartlessboy6038 2 жыл бұрын
I have a challenge for you. Re-create your KZfaq video intro by using html and css.
@KevinPowell 2 жыл бұрын
Oh, that could be fun :D
@heartlessboy6038 2 жыл бұрын
As a beginner Your videos are really really helpful. Thank you so much.
@user-ms8ei9le7x 2 жыл бұрын
✔
@seanpaulson9098 2 жыл бұрын
grid > flexbox
@a-rustacean 2 жыл бұрын
First
@paulhetherington3854 8 ай бұрын
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!