Simplify your CSS with these 3 grid layout solutions
HTML-код
- Опубликовано: 27 июл 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 RUclips 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!
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!
I love grid-column: 1 / -1! Very useful.
Absolutely love all of these videos. I just start to become front-end dev and really lucky to find your channel
Just the first example deserves a HUGE like, Kevin, amazing content like always. Thank you so much for sharing
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 the use of grid for form layouts - nice one.
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
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.
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!
Kevin saving the day with that simple header, main, footer layout fix. Thanks!
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!
This was EXACTLY what I needed today! Thankyou!!
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.
Love CSS. Great video Kevin!
Very very nice! Thank you CSS master! 🙏
Helpful from the first to the last minute. Thanks so much!
That is the best example of sticking a footer to the bottom ive seen. brilliant. Have struggled with this for houurrsssssss lol. great video.
this is wonderful and full of great nuggets of css wizardly. Thanks for sharing this Kevin.
Gonna implement this in my production app today! Thanks Kevin!
Love your vids, man! Keep up the good work. Cheers from Brazil
Great video! Keep up the amazing work!
Thank you for these videos! Giving such great tips, they are helping a lot!
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. 😃😃😃
Excellent explanation!
The dvh(which I didn't know) and svh/lvh just solved the issue I had been working on last week, maaaan thanks!
damn i was looking for a footer alignment fix all week gracias senior 💯
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
This is great. Thank you!
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.
Since flex i was abusing of it. It just been few months since I get how powerful grids are, very nice to see :)
Beautiful content!
Sometimes, your brilliance at what should be obvious but isnt, astounds me
As always great content 👌
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
really help, many thanks
very nice, thank you!
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 ^^
Great video!
Nice! I'm gonna keep it for later 💡
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.
Kevin... you are my hero!
Merci beaucoup Kevin. I really love it
your footer tip saved my life
I was searching this exactly, suddenly saw this ❤️
Great, thanks!
I learnt a lot from your channel. Thank you.🧡
I'm so glad!
Saving this forever
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 😁
bro.. u're on fire.
thanks, I was usually using flex to do this or some ui library but with grids is seems also easy
Nice, thanks.
Thanks from France 🇫🇷❤️
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 ;)
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%;
This is helpful 👌👌
Just what I need. Got to re-write the css im working on.
Sir you are a CSS MVP 💯
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.
Pretty nice video.
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).
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.
That stacking bit is nice. Would've used position: absolute; for that lol
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
Thank you
Thanks!
Thank you so much!
Thanks for lesson
Thank you so much!
Thanks
Always stayed away from grid due to having to support older browsers but recently starting using grid and now I CANNOT STOP using it. 😂
I use Flexbox way too much... Grid is like a last resort thing... yet you somehow talked me into flipping roles.
I just learned about the auto 1f thing last week but I had to do auto, auto, 1fr, auto :)
I prefer the new style, i can pause and check the code instead of waiting to finish the typing, regards from México.
been using grid like an addict everytime code a frontend since I first know it
Greatt Sir
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?
0:02 Yet another legendary Frontend Mentor challenge xD
Hello, nice video :) So using grid is better than using flex to do a responsive design ?
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?
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.
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 ?
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)
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 :)
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.
In the second example the form-group should be a flex container, imo.
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 :)
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!
question: isnt grid-auto-flow makes flexbox kinda useless, i cant remember using flex in the recent times
What life taught me these days , css is harder than javascript most of the times I am trying to use it
I literally did number one this morning lol
sorry this might sound like a dumb question, but should i set up every website i build like this? what's the alternative
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 :)