Easier layouts with these 3 Grid tips

[@universecode1101]

I'm doing a Landing Page with Grid and Flex for my KZbin channel and this sure video can refresh my memory. Thanks Kevin 😊

[@skillzorskillsson8228]

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

[@windubitably]

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]

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]

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

[@jerryleemelton1860]

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!

[@Александр-л8э9й]

Very cool tricks. Especially with the min function. We love you Kevin.

[@juneldelacuadra5973]

You save my life as a front-end dev. Thank you!

[@379rale]

This is so useful... Thought that it couldn't' be done without a media query. Thanks again!

[@sinc1802]

THE LAST TRICK IS. A. BIG. HELP!! I was struggling about background images and this is exactly what I need

[@FrankyDeMeyer]

It always a total joy to watch your tutorials. You make it all look so simple and even fun 👌

[@alwinter]

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.

[@gopalloharnew5948]

This series is a very intelligent decision for beginner in grid ... like me !

[@mohammedbanani3181]

Very useful tips, thanks Kevin!

[@MartynMc]

That last one is so much better than using positioning to get a background image.

[@ishaqiqbal5163]

Always learn new from every video.

[@fsociety401]

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]

Thanks for sharing these tips Kevin. It's very useful in my opinion. I'm really excited for what you do here. Brilliant Job 💪💪💪

[@kevinrobertandrews]

These are great tips! Thanks for sharing ☺️

[@muundus7]

I love your videos man, they're always so useful and incredibly well explained.

[@Xamy-]

Good vid Kevin!

[@olgoree]

noice, this min in minmax is super awesome

[@Yukitocyborg]

As always top quality videos! Really useful tips that I will use right away. Thanks for the content

[@hikari1690]

I'm late to the grid party but I'm glad I hopped on! Some things easier than using flexbox

[@lenarnie2973]

OOOO So nice, i understand now, how it works, thanks

[@bilalekmen4225]

So beauty, I want to learn this

[@germantoenglish898]

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.

[@JohnBortins]

Outstanding!

[@Michael-Martell]

More grid stuff would be cool! Even easier videos for relating common flex tasks to grid tasks.

[@emilie1977]

perfect! Thank you

[@nikolaypanayotov6941]

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.

[@nomadshiba]

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

[@sofian_so]

awesome!

[@it_is_ni]

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

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]

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

[@vishalchavda5766]

Awesome ❤️

[@adamjohnantonio]

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]

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.

[@jammincoder]

Alright man, you've convinced me: grid is awesome; I'll stop using flex box for everything now...

[@siddiqahmed3274]

Both has their use cases. You can't just abandon flex😅

[@jammincoder]

@@siddiqahmed3274 Right on. I did specify not using flex "for everything".

[@pwlctk]

Magic.

[@dakshdas5946]

Hello, have a nice day.

[@KevinPowell]

You too!

[@octothorpe12]

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]

This should cover that. It's my most in-depth video on background images. kzbin.info/www/bejne/aYXCe6xneNZ7b80

[@e11world]

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?

[@dave6012]

Kevin and Kyle are competing for the best pragmatic developer content…. And we’re all winning! 🙌

[@robertjif6337]

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]

Please don't make me relive those days 😂

[@oanemizguel]

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

But not everyone is using tailwind, so the class names from it are just as vague to people who don't use it?

[@oanemizguel]

@@KevinPowell More people understand tailwind than remember what do your custom classes? :D

[@pinnaclewd]

Once a "grider" you never look back 👍

[@Tikolu]

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]

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]

@@KevinPowell No need to hurry ;) You are awesome!

[@FROZeN_FoCUS]

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

[@sugiii9616]

I hated grid, since Kevin I strongly love grid :)

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

[@brownrhythms]

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; }

[@proteus1]

What can be achived for the navigation being turned into a burger style with grid?

[@proteus1]

What is the shortcut for comments. Very useful video by the way

[@KevinPowell]

Ctrl + /. (cmd on mac)

[@proteus1]

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

[@80Vikram]

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

[@christofferandersen2082]

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 :/

[@thomasnelson7582]

Why do things that have "grid-" classnames get grid + gap automatically?

[@KevinPowell]

The [*="grid-"] selector that I showed at near the start of the video selects anything that has a "grid-" in it's classes.

[@heartlessboy6038]

I have a challenge for you. Re-create your KZbin video intro by using html and css.

[@KevinPowell]

Oh, that could be fun :D

[@heartlessboy6038]

As a beginner Your videos are really really helpful. Thank you so much.

[@user-ms8ei9le7x]

✔

[@seanpaulson9098]

grid > flexbox

[@a-rustacean]

First

[@paulhetherington3854]

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!