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 :)
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.
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!
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.
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
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 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.
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%;
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.
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.
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
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).
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 ;)
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.
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
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.
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 :)
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.
Dear bro this is santhosh from India and I am a student ,your videos are rocking man 👨 😎 I was just started to learn html css and Javascript this month 😀 can you post a video about position properties .,it was very tough to understand me in my class 😪 so kindly post 👨 bro 😊😊
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?
If build a (imo) pretty cool 3D roll on hover button by stacking two divs inside a grid link container. It's real 3D and not some pseudo-skew 3D that you are reliant on when building with pseudo-elements. And the great thing is, since no element is positioned absolute they the smaller element takes on the size of the other one. I'll share a codepen of someone is interested
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)
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 :)
Oh wow I personally hate that vdh solution haha Im a html, body { min-height: 100%} kinda gal Usually also throw in a body { display:flex} in there so its easy to build up from there with self placements and weights, like your 1fr for me should be a flex weight since the goal si the content to take up weight more than being placed in a defined area for a simple one column thing but do love a grid layout for any webapps or columned styles
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 👍
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!
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 grid-column: 1 / -1! Very useful.
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.
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!
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'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. 😃😃😃
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
Kevin saving the day with that simple header, main, footer layout fix. Thanks!
Sometimes, your brilliance at what should be obvious but isnt, astounds me
The dvh(which I didn't know) and svh/lvh just solved the issue I had been working on last week, maaaan thanks!
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!
Just the first example deserves a HUGE like, Kevin, amazing content like always. Thank you so much for sharing
That is the best example of sticking a footer to the bottom ive seen. brilliant. Have struggled with this for houurrsssssss lol. great video.
Since flex i was abusing of it. It just been few months since I get how powerful grids are, very nice to see :)
Absolutely love all of these videos. I just start to become front-end dev and really lucky to find your channel
Gonna implement this in my production app today! Thanks Kevin!
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.
Love the use of grid for form layouts - nice one.
your footer tip saved my life
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!
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%;
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 is wonderful and full of great nuggets of css wizardly. Thanks for sharing this Kevin.
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.
damn i was looking for a footer alignment fix all week gracias senior 💯
Helpful from the first to the last minute. Thanks so much!
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.
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 was searching this exactly, suddenly saw this ❤️
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!
Love CSS. Great video Kevin!
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).
Just what I need. Got to re-write the css im working on.
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 ^^
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 ;)
Love your vids, man! Keep up the good work. Cheers from Brazil
Superb! One of the very best from Kevin. Very helpful. Thank You
This was EXACTLY what I needed today! Thankyou!!
Thanks for sharing with us! I will use for my projects this approach... 🇧🇷
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.
I use Flexbox way too much... Grid is like a last resort thing... yet you somehow talked me into flipping roles.
Very very nice! Thank you CSS master! 🙏
thanks, I was usually using flex to do this or some ui library but with grids is seems also easy
I prefer the new style, i can pause and check the code instead of waiting to finish the typing, regards from México.
Thank you for these videos! Giving such great tips, they are helping a lot!
That stacking bit is nice. Would've used position: absolute; for that lol
bro.. u're on fire.
I just learned about the auto 1f thing last week but I had to do auto, auto, 1fr, auto :)
been using grid like an addict everytime code a frontend since I first know it
Excellent explanation!
Sir you are a CSS MVP 💯
Thanks from France 🇫🇷❤️
Nice! I'm gonna keep it for later 💡
Kevin... you are my hero!
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
Saving this forever
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.
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 :)
Always stayed away from grid due to having to support older browsers but recently starting using grid and now I CANNOT STOP using it. 😂
Beautiful content!
This is great. Thank you!
Great video! Keep up the amazing work!
I learnt a lot from your channel. Thank you.🧡
I'm so glad!
0:02 Yet another legendary Frontend Mentor challenge xD
As always great content 👌
really help, many thanks
Merci beaucoup Kevin. I really love it
In the second example the form-group should be a flex container, imo.
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.
Videos shorter than 8 minutes 😍👌
That 5-7 minute range is *chefs kiss*
Great video!
very nice, thank you!
Great, thanks!
Dear bro this is santhosh from India and I am a student ,your videos are rocking man 👨 😎 I was just started to learn html css and Javascript this month 😀 can you post a video about position properties .,it was very tough to understand me in my class 😪 so kindly post 👨 bro 😊😊
I already have a few videos on that! If you look up my name with positioning, they should turn up :D
Nice, thanks.
Hmm... I still think that flex with flex grow on main makes more sense to me, but the other tips are excellent!
Same thing, but then you also need to change the flex direction, which always bugs me, lol. Either one works though :)
Pretty nice video.
This is helpful 👌👌
Thank you
Hello, nice video :) So using grid is better than using flex to do a responsive design ?
I literally did number one this morning lol
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?
What life taught me these days , css is harder than javascript most of the times I am trying to use it
If build a (imo) pretty cool 3D roll on hover button by stacking two divs inside a grid link container. It's real 3D and not some pseudo-skew 3D that you are reliant on when building with pseudo-elements. And the great thing is, since no element is positioned absolute they the smaller element takes on the size of the other one. I'll share a codepen of someone is interested
I'd take a look at it 😁
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!
Thank you so much!
Thanks
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
Thanks for lesson
Thank you so much!
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 :)
Oh wow I personally hate that vdh solution haha
Im a html, body { min-height: 100%} kinda gal
Usually also throw in a body { display:flex} in there so its easy to build up from there with self placements and weights, like your 1fr for me should be a flex weight since the goal si the content to take up weight more than being placed in a defined area for a simple one column thing but do love a grid layout for any webapps or columned styles
In less than 8 minutes ❤❤
I think the first one was due to most of the solutions come from the old days before grid, postion: sticky, etc ...
The father of Grids.