Hi, Sir! I am a 14 year-old doing front-end dev and I use flex box for almost everything. The idea of "grid" really used to infuriate me, but with your help, I'm getting better at making "griddy" layouts. Thanks man! Respect...
From all the css frameworks out there I only use Flexbox because it is so easy and flexible. If there is anything I need on top of that I use bulma which is based on flexbox.
Nice! Keep it up :) I think actually it was Kevin Powell also, said Grid for layout, flex for content. I'm getting used to griddiness too :) Good luck!!!
@@seeithappen1 This is correct, but a framework shouldn't be the first thing that comes to your mind when you hear "flexbox". It is a layout module within CSS, which can be easily implemented without the use of Bulma, Gridlex (never heard of it tbh - 6 years exp) or Bootstrap. I suggest that you learn the basics before touching any libraries or frameworks.
Started web development in the late 90's and had been doing things the old way till 2015, struggled to adapt to new standards but Kevin's way of explaining every step and the why's and how's made me appreciate how far web development has progressed, great materials to catch up with the latest standards.
Hear hear! I tried starting in the late '90's, but I was never able to wrap my head around the "hacky" _float_ methods, so I just gave up. It wasn't until _Grid_ and _Flexbox_ that I got back into learning.
Pretty sure this right here is the video that makes/made/will make me love CSS grids. I've (finally) begun using grids a bit more extensively recently (after a whole career of crying over IE 6 and 8, and sometimes 11), but never this cleverly. These code examples are so elegant, Kevin. Thank you for this!
That makes me so happy! So glad that you enjoyed it, and that I can push you over to the... grid side? 😅 - Also, happy for you if you no longer have to worry about IE!
I run my own small website business and whatever the topic, easy or complex, with Kevin's soothing voice and bubbling enthusiasm, I always come away from his videos having learnt something new with a smile. Thanks Kevin, you do a wonderful job! 😀
ปีที่แล้ว +15
Imho this is one of the best videos that you've produced. Very concise and informative. Thank you very much for taking the time to educate us :)
I love these short "tips and tricks" videos of yours. There's been several times over the last couple of years where I refer back to them in my favorites list. More videos in this format, please!
Thanks for advocating for grids within grids! And for showing how much you can get for the inner grid with just the `display` rule. I've been nesting grids for forms myself and I always wondered if it was a bit of a cheap solution; it felt like it could add a lot of complexity just to get `input` and `select` elements to line up, but what you show here doesn't feel so heavy.
this video is pure gold. even if you don't have the time professionally to study css in details, this one especially about the tips for the forms is a must see
That stacking solution completely blew my mind, I didn't know that was even possible without position absolute. I've been actually looking for something like this -- how to place one element on top of another one with their container taking the bigger size.
I design (desktop only) complex forms for industrial calculations. On each form the number of inputs field is different. The "grids within grids" is the best approach to maintain the overall structure of the form (5 rows) but with a different number of fields in each row.
when stacking content per your example, I usually go the "position: absolute" route. I like your grid solution more because it's arguably easier to implement, but more importantly, there's so much potential for responsive layouts. I use a lot of tailwind, and grid is awkward there, but I see the value and will find ways of using it properly. awesome tut Kevin, much appreciated!
6:03 i think you should also make the submit button fill fullscreen with by default and `justify-items: start` it. because you might remove "Questions/Comments" textarea later or add something else under it. tbh i would just put it in something else called "actions", so you can add other buttons later
4:06 In the cell of the grid, that would be the perfect example of when you should use flexbox, inside of a grid. Since you're not going to be "gridding" a lot of elements in a cell, maybe just a label & input, doing 'display:flex' seems more natural here.
I disagree. I'm really against the idea of "grid for 2D, flex for 1D". In this case, grid works immediately, with flex, I'd also have to change the flex-direction. I just don't see the point. And I'm not some anti-flexbox person by any means, I love it and use it all the time, I just think this is a perfect use case for grid, and I do stuff like this all the time :)
Hey kevin, thank you. just to mention, i have a js swiper on a page, grid display made it stretch and cause an overflow, i fixed that by using : grid-template-columns: 100%;
Just saw all your grid vids and wondered if I can nest grids - and here is the answer. ❤ Looks like, you can read minds. You made my day, thx a lot Kevin
I would love to see you do a video on grid-first CSS - literally building apps with `div { display: grid; }`. No block elements, clear fixes, margin: auto centering (or margins at all - everything done with padding and gap), vertical alignment hacks, etc. It's a really powerful way to create layouts with a 1:1 match of elements to UI features, with the downside of not working with third party elements that assume block layout.
I think I'm pretty good at CSS but man, little tricks like just using another grid within a grid to make the content actually fill its width are things I wouldn't think of initially. I would've gone with your first approach and have a good couple of lines messing with the label and input and all the spacing that comes with it - it gets the job done but isn't that much cleaner haha. What I'm saying is I will never not appreciate your videos, I learn something cool everytime ;)
Wow, thank you so much. Submitted my first website project yesterday where I created layout with grid with other grid inside of it. Wasn’t sure if it was acceptable way to go.
The notion of "Give up and use tables" appeals to me more and more with how diverse CSS and browser support has been over recent years. I used to love web design, I absolutely hate it now.
Hello Mr Powell. I have a CSS challenge for you that I myself can not wrap my head around. Having an tag, only use CSS to remove the green-screen in the image by making that portion of the image transparent (without javascript / additional DOM elements).
Wish I had known about these a year ago. I did all kinds of hack to get the footer stick to the bottom in small page. I'm still trying to get used to CSS Grid. My go to tool is flexbox and I'm comfortable with hit, but I have to get out of my comfort zone.
When I first heard about grid I had a play around with it and tried doing the grid within a grid thing. Didn't work out very well for me but I'm pretty sure that was down to ignorance and trying to produce something far too complex (think grid within grid within grid). Of course I hadn't heard of Kevin back then 😁
Hi Kevin. I am a big fun of you and your channel. I am also deeply in love with CSS, especially the smart solutions for a given problem. There is now an interesting problem, which needs some workaround. Unfortunately :has does not work for :hover state, so I gave up using this solution for highlighting columns and rows of a simple HTML table layout. I think, this solution is not too nice, but there is no other option, I guess. table { overflow: hidden; } table tbody tr:hover { background-color: hsla(121,23%,62%,0.2); } table tbody tr td:hover:before { content:""; display: block; position: relative; z-index: -1; width: 100%; height: 200em; margin-bottom: -200em; top: -100em; background-color: hsla(180,23%,62%,0.1); } table tbody tr td .content { padding-inline:10px; } table tbody td:has(table) .content { padding-inline: 0; } I am curious, if you have a nicer solution for that... Thank you in advance.
Some handy tips here. Thank you! I'm new to your channel and have been out of the web game for a while. I see tags like "main", "header" and "article" in a lot of your videos. Is there a good reference for all of the new tags and their uses someone could share?
I don't, no. Animating full-on layout changes is pretty intensive stuff, and some of it's not really possible unless you want to dive into the world FLIP animations, which would require a lot of setup for when devs are playing around with screen sizes :D (EDIT: there might be other reasons and things you want to do with the resize, but if it's just to animate going from desktop to mobile or something similar, I don't think it's worth the effort tbh)
Thanks for another awesome lesson! I have a stacked grid with 2 partially overlapping images, kind of like the card front and back from your "position absolute" video from the other day. Now I want to animate the back image to slide in and out the grid. Is that even possible or will the grid always block the animation from breaking out?
really enjoying using grid. I was wondering whether you could use the overlapping grid items to create a Material UI animated input field but turns out I can't animate grid-row which is a shame. Are there any plans for grid animation support?
On the last example at the very end, can you center the submit button (horizontally) while keeping it inside the grid? Instead of leaving the submit button on the left column of the grid
What do you think could be a problem with subgrid still not having support in chrome? This is so much needed for forms where labels are placed next to the control.
That's built into all the browsers :). You toggle on the grid inspector (there is a little grid icon in the dev tools next to anything with display: grid). That will show you the grid itself. Then, in the Layout tab, you can change the color, turn on and off line names and line numbers. This video was in Chrome, but I prefer the Firefox one because the numbers and area names are a lot more obvious.
2:37 That’s I never understand. When stretch the height with 100vh, and there’s lot of content, the windows is even full on screen, it creates vertical scrolling. Just a little, but creates… Same in this part of the video. Why’s that?
Hello sir, hope you are doing well. Can you tell me how can i apply these grid settings to chakra ui ? Do i need to apply these settings on layout. Tsx file or on the respective web pages like header, footer etc ?
this is great kevin thanks you - am i missing something, is there starter css for this project? i like to code-along to these videos. thanks again for your amazing tutorials
Yeah, but we always need to be aware of older version of Safari on iOS too, since older iPhones can't update, so they often take up a pretty big share (0.8% currently, according to caniuse.com, which is pretty high)
Hi Kevin! First of all, thank you for the awesome content that you put on this platform :) I have a question: for the first pattern (the so called "sticky footer") I always preferred the flex approach, which consists in setting a display of flex with a direction of column on the container, then adding a margin-top: auto on the footer. This, in my opinion, has the little advantage of avoiding being explicit with my rows: even if I had other elements between my and my , I would be sure that the footer would always stick to the very bottom of the page. Grid, on the other hand, would require me to update the grid-template-rows. Of course, with the flex solution, if I needed my to take up all the available space I could always throw a "flex: 1" on it. What do you think? And again, thanks for the video :)
Hi, Sir! I am a 14 year-old doing front-end dev and I use flex box for almost everything. The idea of "grid" really used to infuriate me, but with your help, I'm getting better at making "griddy" layouts. Thanks man! Respect...
From all the css frameworks out there I only use Flexbox because it is so easy and flexible. If there is anything I need on top of that I use bulma which is based on flexbox.
Nice! Keep it up :) I think actually it was Kevin Powell also, said Grid for layout, flex for content. I'm getting used to griddiness too :) Good luck!!!
@@seeithappen1 Flexbox is not a CSS framework
@@walnut2983 Yes I know, Flexbox is used to make frameworks like Bulma and Gridlex ...
@@seeithappen1 This is correct, but a framework shouldn't be the first thing that comes to your mind when you hear "flexbox". It is a layout module within CSS, which can be easily implemented without the use of Bulma, Gridlex (never heard of it tbh - 6 years exp) or Bootstrap. I suggest that you learn the basics before touching any libraries or frameworks.
Started web development in the late 90's and had been doing things the old way till 2015, struggled to adapt to new standards but Kevin's way of explaining every step and the why's and how's made me appreciate how far web development has progressed, great materials to catch up with the latest standards.
Hear hear!
I tried starting in the late '90's, but I was never able to wrap my head around the "hacky" _float_ methods, so I just gave up. It wasn't until _Grid_ and _Flexbox_ that I got back into learning.
Pretty sure this right here is the video that makes/made/will make me love CSS grids. I've (finally) begun using grids a bit more extensively recently (after a whole career of crying over IE 6 and 8, and sometimes 11), but never this cleverly. These code examples are so elegant, Kevin. Thank you for this!
That makes me so happy! So glad that you enjoyed it, and that I can push you over to the... grid side? 😅 - Also, happy for you if you no longer have to worry about IE!
Really liked the method of showing a piece of code one at a time, instead of writing it one by one. Fireship uses it, too, which is awesome 👍
I run my own small website business and whatever the topic, easy or complex, with Kevin's soothing voice and bubbling enthusiasm, I always come away from his videos having learnt something new with a smile. Thanks Kevin, you do a wonderful job! 😀
Imho this is one of the best videos that you've produced. Very concise and informative. Thank you very much for taking the time to educate us :)
I love these short "tips and tricks" videos of yours. There's been several times over the last couple of years where I refer back to them in my favorites list. More videos in this format, please!
Thanks for advocating for grids within grids! And for showing how much you can get for the inner grid with just the `display` rule. I've been nesting grids for forms myself and I always wondered if it was a bit of a cheap solution; it felt like it could add a lot of complexity just to get `input` and `select` elements to line up, but what you show here doesn't feel so heavy.
Just the first example deserves a HUGE like, Kevin, amazing content like always. Thank you so much for sharing
this video is pure gold. even if you don't have the time professionally to study css in details, this one especially about the tips for the forms is a must see
Absolutely love all of these videos. I just start to become front-end dev and really lucky to find your channel
That stacking solution completely blew my mind, I didn't know that was even possible without position absolute. I've been actually looking for something like this -- how to place one element on top of another one with their container taking the bigger size.
Thanks!
Thank you so much!
I design (desktop only) complex forms for industrial calculations. On each form the number of inputs field is different. The "grids within grids" is the best approach to maintain the overall structure of the form (5 rows) but with a different number of fields in each row.
when stacking content per your example, I usually go the "position: absolute" route. I like your grid solution more because it's arguably easier to implement, but more importantly, there's so much potential for responsive layouts. I use a lot of tailwind, and grid is awkward there, but I see the value and will find ways of using it properly. awesome tut Kevin, much appreciated!
I love grid-column: 1 / -1! Very useful.
Thanks for lesson
Thank you so much!
Love CSS. Great video Kevin!
That is the best example of sticking a footer to the bottom ive seen. brilliant. Have struggled with this for houurrsssssss lol. great video.
Kevin saving the day with that simple header, main, footer layout fix. Thanks!
Love your vids, man! Keep up the good work. Cheers from Brazil
Very very nice! Thank you CSS master! 🙏
this is wonderful and full of great nuggets of css wizardly. Thanks for sharing this Kevin.
Love the use of grid for form layouts - nice one.
Superb! One of the very best from Kevin. Very helpful. Thank You
I'm a backend developer but every once in a while I have to do some front end work and this it's extremely helpful. Thank you very much. 😃😃😃
6:03 i think you should also make the submit button fill fullscreen with by default
and `justify-items: start` it. because you might remove "Questions/Comments" textarea later or add something else under it.
tbh i would just put it in something else called "actions", so you can add other buttons later
4:06 In the cell of the grid, that would be the perfect example of when you should use flexbox, inside of a grid. Since you're not going to be "gridding" a lot of elements in a cell, maybe just a label & input, doing 'display:flex' seems more natural here.
I disagree. I'm really against the idea of "grid for 2D, flex for 1D".
In this case, grid works immediately, with flex, I'd also have to change the flex-direction. I just don't see the point.
And I'm not some anti-flexbox person by any means, I love it and use it all the time, I just think this is a perfect use case for grid, and I do stuff like this all the time :)
Hey kevin, thank you. just to mention, i have a js swiper on a page, grid display made it stretch and cause an overflow, i fixed that by using : grid-template-columns: 100%;
Helpful from the first to the last minute. Thanks so much!
Hi Kevin, I've been watching your videos for years. They all are great and I always learn something, but this one was pure gold again. Thank you!
Gonna implement this in my production app today! Thanks Kevin!
The dvh(which I didn't know) and svh/lvh just solved the issue I had been working on last week, maaaan thanks!
Sometimes, your brilliance at what should be obvious but isnt, astounds me
Since flex i was abusing of it. It just been few months since I get how powerful grids are, very nice to see :)
Just saw all your grid vids and wondered if I can nest grids - and here is the answer. ❤ Looks like, you can read minds. You made my day, thx a lot Kevin
The tip, using grid that way you explained in a form is awesome! Have done it to complicated before 🙈 Thanks for the ideas 👍🏻👍🏻👍🏻 I love your videos!
if you don't want to use vh or dvh you can set height: 100% on your html,body and wrapping element and you get the same result. :)
what do you mean "set height: 100%" on your HTML Body element? pleasse elaborate - im a newbie so just wondering what you mean lol thanks in advance
This was EXACTLY what I needed today! Thankyou!!
Great video as always, however the feature that blew my mind the most is the dvh unit... holy shit i've been waiting for this ^^
damn i was looking for a footer alignment fix all week gracias senior 💯
Thanks for sharing with us! I will use for my projects this approach... 🇧🇷
Excellent explanation!
Thank you for these videos! Giving such great tips, they are helping a lot!
I would love to see you do a video on grid-first CSS - literally building apps with `div { display: grid; }`. No block elements, clear fixes, margin: auto centering (or margins at all - everything done with padding and gap), vertical alignment hacks, etc. It's a really powerful way to create layouts with a 1:1 match of elements to UI features, with the downside of not working with third party elements that assume block layout.
your footer tip saved my life
I think I'm pretty good at CSS but man, little tricks like just using another grid within a grid to make the content actually fill its width are things I wouldn't think of initially. I would've gone with your first approach and have a good couple of lines messing with the label and input and all the spacing that comes with it - it gets the job done but isn't that much cleaner haha.
What I'm saying is I will never not appreciate your videos, I learn something cool everytime ;)
Wow, thank you so much. Submitted my first website project yesterday where I created layout with grid with other grid inside of it. Wasn’t sure if it was acceptable way to go.
thanks, I was usually using flex to do this or some ui library but with grids is seems also easy
As always great content 👌
The notion of "Give up and use tables" appeals to me more and more with how diverse CSS and browser support has been over recent years. I used to love web design, I absolutely hate it now.
Hello Mr Powell. I have a CSS challenge for you that I myself can not wrap my head around. Having an tag, only use CSS to remove the green-screen in the image by making that portion of the image transparent (without javascript / additional DOM elements).
Beautiful content!
Great video! Keep up the amazing work!
Videos shorter than 8 minutes 😍👌
That 5-7 minute range is *chefs kiss*
Kevin... you are my hero!
Wish I had known about these a year ago. I did all kinds of hack to get the footer stick to the bottom in small page. I'm still trying to get used to CSS Grid. My go to tool is flexbox and I'm comfortable with hit, but I have to get out of my comfort zone.
I learnt a lot from your channel. Thank you.🧡
I'm so glad!
I was searching this exactly, suddenly saw this ❤️
When I first heard about grid I had a play around with it and tried doing the grid within a grid thing. Didn't work out very well for me but I'm pretty sure that was down to ignorance and trying to produce something far too complex (think grid within grid within grid).
Of course I hadn't heard of Kevin back then 😁
Sir you are a CSS MVP 💯
This is great. Thank you!
bro.. u're on fire.
I use Flexbox way too much... Grid is like a last resort thing... yet you somehow talked me into flipping roles.
Merci beaucoup Kevin. I really love it
Thanks from France 🇫🇷❤️
Hi Kevin. I am a big fun of you and your channel. I am also deeply in love with CSS, especially the smart solutions for a given problem. There is now an interesting problem, which needs some workaround. Unfortunately :has does not work for :hover state, so I gave up using this solution for highlighting columns and rows of a simple HTML table layout. I think, this solution is not too nice, but there is no other option, I guess.
table {
overflow: hidden;
}
table tbody tr:hover {
background-color: hsla(121,23%,62%,0.2);
}
table tbody tr td:hover:before {
content:"";
display: block;
position: relative;
z-index: -1;
width: 100%;
height: 200em;
margin-bottom: -200em;
top: -100em;
background-color: hsla(180,23%,62%,0.1);
}
table tbody tr td .content {
padding-inline:10px;
}
table tbody td:has(table) .content { padding-inline: 0; }
I am curious, if you have a nicer solution for that...
Thank you in advance.
really help, many thanks
Nice! I'm gonna keep it for later 💡
Great video!
That stacking bit is nice. Would've used position: absolute; for that lol
very nice, thank you!
Just what I need. Got to re-write the css im working on.
Some handy tips here. Thank you!
I'm new to your channel and have been out of the web game for a while. I see tags like "main", "header" and "article" in a lot of your videos. Is there a good reference for all of the new tags and their uses someone could share?
I prefer the new style, i can pause and check the code instead of waiting to finish the typing, regards from México.
I just learned about the auto 1f thing last week but I had to do auto, auto, 1fr, auto :)
Hello, nice video :) So using grid is better than using flex to do a responsive design ?
0:02 Yet another legendary Frontend Mentor challenge xD
Saving this forever
This is helpful 👌👌
Great, thanks!
grid is awesome.have you got any videos on animating the change of screen width when you hit a breakpoint?
I don't, no. Animating full-on layout changes is pretty intensive stuff, and some of it's not really possible unless you want to dive into the world FLIP animations, which would require a lot of setup for when devs are playing around with screen sizes :D (EDIT: there might be other reasons and things you want to do with the resize, but if it's just to animate going from desktop to mobile or something similar, I don't think it's worth the effort tbh)
Thanks for another awesome lesson! I have a stacked grid with 2 partially overlapping images, kind of like the card front and back from your "position absolute" video from the other day. Now I want to animate the back image to slide in and out the grid. Is that even possible or will the grid always block the animation from breaking out?
Should work fine, as long as the parent doesn't have an 'overflow: hidden' on it :)
been using grid like an addict everytime code a frontend since I first know it
Always stayed away from grid due to having to support older browsers but recently starting using grid and now I CANNOT STOP using it. 😂
really enjoying using grid. I was wondering whether you could use the overlapping grid items to create a Material UI animated input field but turns out I can't animate grid-row which is a shame. Are there any plans for grid animation support?
On the last example at the very end, can you center the submit button (horizontally) while keeping it inside the grid? Instead of leaving the submit button on the left column of the grid
You'd have to have it span both columns, and then you could do a justify-self: center
Nice, thanks.
What do you think could be a problem with subgrid still not having support in chrome? This is so much needed for forms where labels are placed next to the control.
It's just a matter of time, they're actively working on it
question: isnt grid-auto-flow makes flexbox kinda useless, i cant remember using flex in the recent times
Pretty nice video.
In the second example the form-group should be a flex container, imo.
Thanks for this video ! What's your browser (or extension) to see grid cols numbers ?
That's built into all the browsers :). You toggle on the grid inspector (there is a little grid icon in the dev tools next to anything with display: grid). That will show you the grid itself. Then, in the Layout tab, you can change the color, turn on and off line names and line numbers.
This video was in Chrome, but I prefer the Firefox one because the numbers and area names are a lot more obvious.
2:37 That’s I never understand. When stretch the height with 100vh, and there’s lot of content, the windows is even full on screen, it creates vertical scrolling. Just a little, but creates… Same in this part of the video. Why’s that?
Hello sir, hope you are doing well.
Can you tell me how can i apply these grid settings to chakra ui ? Do i need to apply these settings on layout. Tsx file or on the respective web pages like header, footer etc ?
this is great kevin thanks you - am i missing something, is there starter css for this project? i like to code-along to these videos. thanks again for your amazing tutorials
No starter with this one, no. Sorry about that!
@@KevinPowell no worries thanks for answering!
sorry this might sound like a dumb question, but should i set up every website i build like this? what's the alternative
Could you make an explanatory video related to dynamic units?Thank you!
Yeah, I have one in the works, was waiting for browser support to increase, but I plan to talk about it now that it has :D
1:23 the only browser that doesn't support the new viewport units is Samsung Internet, and that only because it uses an old Chromium version
Yeah, but we always need to be aware of older version of Safari on iOS too, since older iPhones can't update, so they often take up a pretty big share (0.8% currently, according to caniuse.com, which is pretty high)
Hi Kevin! First of all, thank you for the awesome content that you put on this platform :)
I have a question: for the first pattern (the so called "sticky footer") I always preferred the flex approach, which consists in setting a display of flex with a direction of column on the container, then adding a margin-top: auto on the footer.
This, in my opinion, has the little advantage of avoiding being explicit with my rows: even if I had other elements between my and my , I would be sure that the footer would always stick to the very bottom of the page.
Grid, on the other hand, would require me to update the grid-template-rows.
Of course, with the flex solution, if I needed my to take up all the available space I could always throw a "flex: 1" on it.
What do you think? And again, thanks for the video :)