Simplify your CSS with these 3 grid layout solutions
Вставка
- Опубліковано 20 лип 2024
- 🔥Simple Grid Layouts Cheatsheet: simple-grid-layout.kevinpowel...
Grid is often seen as useful for really large layouts that have a lot of different pieces, but there are other simple things that it can be super handy for as well!
🔗 Links
✅ How to pick between Flexbox and Grid: • Flexbox or grid - How ...
✅ Getting started with CSS Grid: • Getting started with C...
⌚ Timestamps
00:00 - Introduction
00:20 - Keeping the footer on the bottom of a short page
02:14 - Stacking content
03:30 - Small things that need some spacing
#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 UA-cam 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!
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!
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 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! 😀
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!
Absolutely love all of these videos. I just start to become front-end dev and really lucky to find your channel
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!
Just the first example deserves a HUGE like, Kevin, amazing content like always. Thank you so much for sharing
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.
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!
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.
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
Thank you for these videos! Giving such great tips, they are helping a lot!
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.
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
Superb! One of the very best from Kevin. Very helpful. Thank You
Gonna implement this in my production app today! Thanks 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.
Helpful from the first to the last minute. Thanks so much!
This was EXACTLY what I needed today! Thankyou!!
Thanks for sharing with us! I will use for my projects this approach... 🇧🇷
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.
The dvh(which I didn't know) and svh/lvh just solved the issue I had been working on last week, maaaan thanks!
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. 😃😃😃
Love CSS. Great video Kevin!
Sometimes, your brilliance at what should be obvious but isnt, astounds me
damn i was looking for a footer alignment fix all week gracias senior 💯
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.
Very very nice! Thank you CSS master! 🙏
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
Great video! Keep up the amazing work!
This is great. Thank you!
thanks, I was usually using flex to do this or some ui library but with grids is seems also easy
Since flex i was abusing of it. It just been few months since I get how powerful grids are, very nice to see :)
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
Excellent explanation!
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 ^^
really help, many thanks
your footer tip saved my life
Beautiful content!
As always great content 👌
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.
very nice, thank you!
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%;
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 😁
Merci beaucoup Kevin. I really love it
I was searching this exactly, suddenly saw this ❤️
Nice! I'm gonna keep it for later 💡
Videos shorter than 8 minutes 😍👌
That 5-7 minute range is *chefs kiss*
Kevin... you are my hero!
Great video!
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
I learnt a lot from your channel. Thank you.🧡
I'm so glad!
Great, thanks!
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 ;)
Saving this forever
bro.. u're on fire.
Just what I need. Got to re-write the css im working on.
Thanks from France 🇫🇷❤️
Nice, thanks.
That stacking bit is nice. Would've used position: absolute; for that lol
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).
Sir you are a CSS MVP 💯
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 just learned about the auto 1f thing last week but I had to do auto, auto, 1fr, auto :)
This is helpful 👌👌
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?
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.
Pretty nice video.
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 :)
I use Flexbox way too much... Grid is like a last resort thing... yet you somehow talked me into flipping roles.
Thank you
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.
Always stayed away from grid due to having to support older browsers but recently starting using grid and now I CANNOT STOP using it. 😂
Thanks!
Thank you so much!
Thanks
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 :)
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?
been using grid like an addict everytime code a frontend since I first know it
I prefer the new style, i can pause and check the code instead of waiting to finish the typing, regards from México.
Thanks for lesson
Thank you so much!
Hello, nice video :) So using grid is better than using flex to do a responsive design ?
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)
Greatt Sir
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 :)
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.
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!
In the second example the form-group should be a flex container, imo.
0:02 Yet another legendary Frontend Mentor challenge xD
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
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 ?
question: isnt grid-auto-flow makes flexbox kinda useless, i cant remember using flex in the recent times
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
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