Why I use grid over flexbox for this common layout
Вставка
- Опубліковано 27 лип 2024
- Need some quick columns and you throw a display:flex on there are you’re done, right? Well, it can work, but that doesn’t mean it won’t work for you every single time, as I explore in this video.
🔗 Links
✅ Every Layout: every-layout.dev/
✅ Flexbox or Grid, how to decide when to use which? • Flexbox or grid - How ...
⌚ Timestamps
00:00 - Introduction
01:00 - Understanding how Flexbox is calculating the sizes of the columns
03:10 - The solution I like to use
05:38 - Responsiveness
#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!
box-sizing: border-box won't change this, as some comments have asked about. I had this in my code and should have shown it, but as I did show, flexbox is looking at the content-size, and not the box-size, so it doesn't have an influence here.
Honestly, im not even a web dev but been lurking around for some time trying to get into web dev and im surprised it took You this long to actually prefer grid over flex for such things. Much love Kevin!
Interestingly, if you have box-sizing: border-box AND add a flex-basis for the inner items of, say, 20%, they WILL all size the same. But if you use a flex-basis of 100% (which I'll often do if I don't know how many items will be present), it makes the middle one larger. I thought I understood flexbox pretty well - not sure what to make of this!
exactly the reason for me enter the comments😄. Good Video
Thank you for joining the front ends in this corner of the internet@@baphometgaming1056
The lightbulb went on for me once you explained that flexbox uses the content size instead of box size. It had never occurred to me that the browser rendered each using distinct sizing rules. I had just sort of operated under the assumption that everything was like the box model starting from margin, to padding then to content, and never gave it more thought than that.
CSS is a nasty beast. You could go years without ever realising this and one day you’ll be scratching your head for hours upon hours, wondering why an even-sized box-alignment isn’t working like it always has before just because you added some padding. And then, with luck, you’ll stumble across this video and immediately proceed to punch yourself in face multiple times.
This "Flexbox for 1-dimensional, Grid for 2-dimensional layouts" myth has been echoing around the web for way too long.
Thank you for making this video. Grid is amazing.
Alright, time to use 3-dimensional layouts😂
It's not myth, that is still true. But yeah, grid treat width not like flexbox. Flexbox distributes free space, it's about packing things (like toolbars, where it originates from). Grid is for-well-setting a grid, more about organizing space. It's a different approach and a slightly different task.
@@randomdev4246 threejs?
@@levsonc Amazing comment!
Flexbox is the way.
Thanks Kevin, as usual, awesome content, very helpful!!
As always you are a wonderful teacher. I come from the old school of procedural programming from before the internet and the whole DOM box model kills me. It's not my worst struggle but it is at times but thanks to you I have solved many problems. I used to pay but I'm on SS now and only do this to keep me sane. LOL! I just read what I wrote.
Oh my god you cant believe how much this video helps me! Even if i learn from every of your videos, this one solves so many issues i had. I had them because flexbox was the first thing i learned, or at least it was what is used every single time since i started with CSS.
I had the same problem with padding three days ago. I thought I was doing something wrong and then I came across this video. Thank you Kevin!
Hello Kevin, I'm Brazilian and every things has more simple, when I watch your videos. All your content it's amazing, please never stop to do your videos because I need them. I'm learning english during at this time and I expect learn much more with you about Web Development.
You have a gift :) I wish I could explain things as clearly as you do. I tend to over-explain. You are always concise and on point.
Meanwhile CSS frameworks be like:
Let's build our entire grid system with flexbox
that's the reason why I use frameworks only for components and not for layouts.
thats because they know grids are cancer and you should never use grids.
Man, how do you master all this? I mean not only do you clearly understand this and know what you're doing, you're able to explain things in a manner that's easy to understand and digest! I loved (and finally finished) your responsive layouts course and I need to take ALL of your courses. lol Thanks for posting!!!!
man, How can i get this course? Where can i watch? Do you have a link?
@@marcosfavarao938 Do a web search on "Kevin Powell responsive design course" and you'll find a link to the "Conquering Responsive layouts", i think it's called, course. It's absolutely EXCELLENT and HIGHLY recommended!
Thank you very much! Very clear and interesting to watch!
Thank you, always! Another great content and I love your new haircut! 😊❤
I'm a big fan of CSS grid. Thank you for the tips Kelvin.
Very informative and helpful, thanks Kevin! :)
thanks for all your great content!
Great video Kevin. Thanks!
I'm not a professional coder or anything. Just doing it for fun, but also for a long time. And coming from doing layouts with table, everything else is pure magic 😅
Also, great content thank you so much! You have a very great style of teaching.
As someone who learnt flexbox first and found it way easier than grid, I use flexbox for everything (or don't know how to use grid). For this situation, I just throw max-width for each column and everything works fine.
That can help, but it won't fix the issue here unless you put in a fixed size, like say "30%" in this case, but I wouldn't want to do that here because I can use this for 1, 2, 3, 5, 10(!) columns with a single class.
@@KevinPowell that's why I wanna learn the grid. I just want grid to be as handy as flex is for me. xD
BTW everything I know about the CSS, mostly is because of your channel!!
@@KevinPowell exactly that's the only problem but the kind of work that I do. It's mostly creating landing pages and the final design always remains the same. So an exact value for max-width works out well.
But as @sharanam chotai mentioned, I want to learn grid for the same reason as well. But coming out of my shell is not as easy as I thought🥲
@@mparth35 If you create landing pages in your job, then spend a little of your spare time on something completely different, for example, a blog post design. Never stay stagnant and static, especially when you're younger you need to develop your skills constantly.
@@AntiAtheismIsUnstoppable agreed. I'm not even remotely experienced in web development, react and others are still foreign to me. Bit understanding flex vs grid and using them separately, along with understanding position types are some of the most important.
Thank you for these great tips.
i am never see your tutorials. But now i see, you amazing teacher. Thank for the awesome tutorials
Awesome video as always sir
Very useful. Thanks for the info
Another epic CSS video 🔥👍💙
As someone just getting into this I find grid and subgrid to make more sense to me for a lot of layouts. Though I hear using both is the best way.
Yeah, flexbox 100% has it's uses! But I use grid for a lot of stuff these days
@@KevinPowell Nice! I’m on the right track then.
As a beginner, I want to say thanks for your great content. I always used flex ox over the grid and it's time to be comfortable with both 😊
Great video, thanks!
am learning a lot form ur videos thanks for the effort
Cool stuff. Thanks!
Reading comments in front end videos is so relaxing compared to comments on technical videos. I might not be a fan of front end but everything is so clean and happy.
Thx, Kevin!
I avoid media queries for the most part by utilizing flex-basis for the children. This tends to handle most responsive scenarios, but you can still run into issues with width when using flex-grow if your goal was for all of the children to stay the same width. In those instances (where I want a true grid/table) I use grid layout and a custom reusable set of classes that access common width and gap variables. IE "gridRow--small", "gridRow--largest gap--large", "gridRow--medium gap--smallest". Its an easy way of saying "I have a list of things that look best around (X) size... just display them and let them wrap if they need to". I can also nest them, tell them to fill available real estate, dont fill available real estate, etc etc. It seems to work for 98% of all my needs for a few years now.
hi could you post some actual css code on what you are saying, It seems very interesting but I can't get it by reading your comment, thanks
I used this for a project today......Thank you very much
Responsive equal grid in 2 lines of CSS (no media queries):
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
The min() inside the minmax() is the key component here, so when the screen size drops below the px value, the columns will be 100% of the container, otherwise they'd just overflow when they reached the threshold.
Can obviously use a gap too and change auto-fit to auto-fill depending on use case, but I use this all the time on projects and saves a lot of time!
Grid has defined number of cells in one row, it can be important when you want to add columns from code, like buttons or other elements which should be in one line.
Hey Kevin, thanks for all of the videos you continue to put out. They've been a huge help on my front-end journey!
Two questions for ya (or anyone else that may know) if you don't mind!
1. Which video/short was it where you discussed giving a background image full bleed inside of a div/element?
2. What method would be best to contact you with inquiries about front-end/css in general? (Kind of a question that potentially leads to more questions here haha 🤔😅)
Thank you so much man! Youre an inspiration and a great teacher, already looking forward to your next videos!!
🧑🏼💻🤝🏻
For #1 - ua-cam.com/video/MywezIxlp8Y/v-deo.html
For #2 - my discord is best (link in video's description), though it's more of a good place to ask questions, not really ask me directly (though I am pretty active in there).
Thank you for your videos. I always enjoy them and have learned a lot.
I've seen you do this before. Why didn't you suggest something like this for responsive grids? It works really well.
.responsivegrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-gap: 1rem
}
the grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); makes the grid responsive and wrap. auto-fit also works, but it expands the last row to fill the width which I never liked. It's a much better solution than flex for this situation.
My mantra is “Grid for laying out containers, flex for laying out content.”
First think: "What is support of grid?", but after small investigation on "caniuse" I realize that in this case grid is OP. Thx for trick and good practice)
Thank you.
A timely drop indeed. I am currently designing a cards design for a website.
awesome very helpful.
I love you Kevin
Good work Kevin. This probably is a design "flaw" by `flex`, maybe they didn't think of enforcing the size at the first place. It could be a feature as well. Anyway, practically I felt `grid` is useful for un-structured content and `flex` is more for the structured one, relatively speaking.
Yes, when i used display flex it easy to me to centrer, justify, algin, but now i am using bootstrap it very ez and pushed u to be real pro and simple.
Nice. I barely use grid and just flexbox everybody and their mother. However, it seems there's definitely benefits to using grid in certain situations. Thanks.
This video got me thinking..... Kevin, I was wondering if you can make a video to explain WHEN it's better to use Flexbox and WHEN it's better to use Grid.
The good and bad of CSS is all that. It surprises you every project, also on re-design, and you'll never stop learning new tricks to get around situations. 🤯
IMHO the concept of grid works better for me. You see what's defined in grid-columns. But that's just me and my apps that have a strict fixed column based layout and will ONLY work on a large screen by design. In a more abstract way: grid is more declarative / imperative than flex. I do admit I'm a control freak ;-)
Kevin, nice video as always! But I want to ask you, is there any way to center items in grid which moves to next row? For example I have 4 items of the same size, and then there are not enough space for all of them, one will move to the next line and centering? If I do repeat auto fill etc it works by columns, but I want next line to be whole width and centering items:) hope you understand me, have a nice day!
No, not how grid works. For that you do need flexbox, and it would just mean you would have the parent flex container, then inside that your columns, and then *inside* the columns you can place the content, and you'll avoid this issue
0:32 why I stopped using flex and am just going to use absolute and calculate things myself (even if it's going to be marginally slower).
I added a large image, which I wanted to basically just take up the remaining space, and it ended up pushing the cell wider than its set size...
grid: auto / auto-flow 1fr; is definitely one of my most used css rules.
Have you maybe considered migrating your intro logo bumper (0:35) to a dark theme? When I watch your videos (usu. before sleep) this flash of white background hurts my eyes :) ty!
Look into TaikwindCSS. It's really intuitive for grid and flex box layouts. You honestly need to use both appropriately together or neither work as well as they should. TaikwindCSS bridges that gap unlike any other css tool I've ever used.
it's obvious that combination of flexbox and grid is very powerful
I've always hated CSS. Your channel helps a lot. Thank you.
As someone who was doing HTML back in the days before CSS, I must say I don’t miss all that old random collection of attributes one bit.
very timely video. I was working on a frontend mentor challenge and I ran into this exact issue with columns being misaligned. I've been using flex almost exclusively since I've started and I'm gonna have to get more familiar with grid.
I found a good little gamified learning site for grid that covers the basics. It's called "Grid Garden" if anyone's interested.
when i was learning CSS my teacher gave us the links to grid garden and flexbox froggy and every single one of us thought how amazing and how easy it was to learn with this games
@@Bansh33 It's awesome how many people put in the effort in order to teach others! The visual nature of the gamified stuff really helps (as opposed to just reading docs).
The flexbox game I started with was called flexbox zombies (lol), another good one.
@@dugannash9109 I agree!
have to check that one, thank you
I find flex better at semantics, readability, and utility.
Ex. bootstrap's
container -> row -> col
Flexbox is the better solution for me when I do a 5 columns layout (for showing features or values, imagine an icon centered on top of each children) and want it to wrap but be centered. So context can also dictate the best approach sometimes. But thanks for another great content!
Most of the time I use grid, but sometimes, when I want the last row of the items to be horizontally centered when the total items of the last row is less than the number of grid columns, I don't think grid can do that since it's a 2 dimentional layout, but flexbox can do.
Yup, good use case for flex there :)
Wait how do you do that?
You mean like for example having 3 divs, you place 2 divs in a 1 row and last one you center in the middle of the second row to look better?
How would you do it with flex?
@@blejac948 There is no trick, it's the default behavior of flexbox. Just add these props to the parent: "display: flex; align-items: center; justify-content: center; column-gap: 1rem; row-gap: 1rem".
@@kapa4208 Yeah I think we are not understanding each other. If you set it up like that you are just going to have 3 divs in 1 row. What I was talking about, and got from your first comment is 2 divs in 1 row, 1 div in a second row, horizontally centered.
@@blejac948 If all items fit in 1 row, why bother to separate them into a new row. What I meant, if you have 7 cards, and for example in desktop viewport it can contain 5 cards (higher than that then the cards will be shrinked too much), then flexbox will put the remaining cards into a new row (btw i forgot that you also have to specify this prop to the parent element "flex-wrap: wrap"). And then it's just the matter of how you specify the width of the children (those 7 cards), whether you are using flex-basis property, or width property, either using percentage value or fixed value.
If all children should have the same size, grid is usually the best option.
I literally hate CSS, so im glad I found you
At least I can spend time mastering grid without worries now.
The haircut 👌
Opinions on the "grid for layout, flex for components" guideline?
Honestly, as I discovered grid I've totally abandoned flex for every layout, even in single row. Grid is pretty straight forward and simple, expecially for column dimensions and positioning. The only thing I find useful about flex is to center a single element vertically and horizontally, for everything else grid is the best.
I see you from a mountain in colombia, i give thanks to Gosh for the connection that allows me to see you. I have a question.... How font size responsive, % em rem which one use? Should i use tag or use the images as background with css?... I wanna build something but not just copy the work others but understand what i a doing!! Thanks i dont know if i wrote in good way. But thanks for your attention. Peace
widh: calc(100% - 60px) & space between 😁
You should just add "cta" class in first div wrapper UNDER column div. Column div should never be messed with. :) Friendly advice-
That would solve the issue, and works fine, but when I don't have to bother with "columns" and then content inside the columns, and just plug content into the grid, I find it so much easier and cleaner.
also to add grid gap works on older browsers than flex
What about just... setting a fixed width on the columns?
flex-grow: 1;
width: 300px; (where it'll wrap)
Is flexbox is better for SEO and speed or grid is better for SEO and page load ?
Sir to avoid height for background image how to give height without using height using flexbox or grid plz reply😊
It's a very interesting video (as always), but I have a question(as always). Why can't we just give "box-sizing: border-box" to the all child-elements?
Because flexbox isn't looking at the box-size, it's looking at the content size. I had that rule in my CSS and should have shown it in the video to show that it doesn't have any effect.
@@KevinPowell so are you going to put that update in upcoming video or anything else ..?
@@KevinPowell yeah, after asking, I had a free minute to check it on my own, but anyway thank you (both for answer and for content you create)
hey uh, whats that font you are using??
I wonder if box-sizing does affect flex.
Not for what I looked at here
I prefer to just set a width on the flex items, personally. Really never cared for grid. Probably because I started trying to use it back when IE still mattered and went absolutely insane trying to make it work over there.
Now I only use Grid to hack stuff into overlapping other stuff while still having flow lol.
This is okay in theory😊some IOS devices doesn’t support grid,aldo the documentation says differently. For now I think that flex is still better
My man internet explorer support grid tf you are talking about iphone 3g browser?
@@18.j I'm just saying facts. I'm working as a developer and I need to check on many devices
Apple’s browser is crap. Is it really worth the headaches to pander to them?
@Ghots But the USA only accounts for something like 20% of the world market.
I’m using width:33.3%; and float:left;
Why u don't use
display: grid;
grid-template-colums: repeat(auto-fit,minmax(min(100%,200),1fr)) ?
i like grid, but i have two problems with it: 1. how center elements easily like in flexbox, 2. why in firefox fr unit is sometimes weird
Place-items: center;
@@davien001 nope i meant center columns - for example in 3 column grid i want last row to center if there's less than 3 columns used - you can't do that in grid - if this will be possible flexbox will be out.
@@hahabanero align-self: center;
justify-self: center; On Child element;
Would box-sizing: border-box; not fix this?
Nope. I should have mentioned it in the video, but I had that already. Flexbox, isn't looking at the box-size, but only the content-size no matter what you do.
I prefer grid but i think there is Cross browser problem with it. Do you have any solution for that issue?
I look at the browser-support matrix on MDN for the “display: grid” option, and I don’t see any obvious red marks. Which ones cause trouble?
can grid create layout like this on list article?
--- --- ---
--- ---
Grid is awesome indeed. I've been using it since 2018 and never looked back. I use flexbox once or twice a year at most, when I need to display a random list of wrapping elements with random column sizes.
I ran into issues with flexbox on mobile but that never happens with grid. Imma grid lover now.
Why not just use relative position and absolute position?
display: flex
justify-content: space-evenly
How to make equal width columns if one of the children has a border?
Grid will work there too :D
@@KevinPowell Ok, columns are equal indeed, but what about equal rows? Unlike the width, the height doesn't want to shrink and the whole next row is pushed down.
always swapping flex and grid..quite often find I can use the other instead.
and as for unreasonable padding IRL ugh 😑 I swear this current design has like 20em padding on everything
People use flexbox over grid because most browsers support it ☺️
Kevin we need a better explination to why this is actually happening ...
I am occasionally running into this issue when I have a navbar of three 1frs
nice mohawk 😅😁
Why insert a media-query instead of actually using grid minmax? That way the columns will Start to collapse without having to resort to statically set mediaqueries.
Are you using Firefox Kevin?
Sorry i see that you are :)
Seems like you already talked about it in some other video?
Sure have, but I think it's the first time I focus specifically on this :)
@@KevinPowell oh, I must need to watch your videos again... Probably, I missed that part somehow
justify-content: between?
Divs arn't semantic, so why use them? Are Container Q mainstream now?
Not every element needs to be a semantic one, and in this example I don't really know what would be more appropriate 🤔. It's possible that a .card type thing could be an article, but it's pretty dependent of the content and showing that as a "default" could lead to more problems than improvements.
They are both supposed to used together :)
Sorry i use both grid and flex. But this one will be much simplier with flexbox.