Why I use grid over flexbox for this common layout

Подписаться 917 тыс.

Просмотров 229 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 201

@KevinPowell Год назад

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.

@benyosu843 Год назад

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!

@Rowan11088 Год назад

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!

@velkanalpha Год назад

exactly the reason for me enter the comments😄. Good Video

@evanoffhandson7067 8 месяцев назад

Thank you for joining the front ends in this corner of the internet@@benyosu843

@Pesthuf Год назад

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.

@randomdev4246 Год назад

Alright, time to use 3-dimensional layouts😂

@user-zh5kg2op4h Год назад

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.

@nangu8896 Год назад

@@randomdev4246 threejs?

@godnyx117 Год назад

@@user-zh5kg2op4h Amazing comment!

@gbbarn 4 месяца назад

Flexbox is the way.

@PhilLesh69 Год назад

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.

@chrisstucker1813 Год назад

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.

@zachjensz Год назад

Meanwhile CSS frameworks be like: Let's build our entire grid system with flexbox

@riddixdan5572 Год назад

that's the reason why I use frameworks only for components and not for layouts.

@Dead_Goat 4 месяца назад

thats because they know grids are cancer and you should never use grids.

@rpf23543 Год назад

Thanks Kevin, as usual, awesome content, very helpful!!

@peng_edits Год назад

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.

@siriusgd4753 Год назад

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.

@yakupjs Год назад

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!

@TheCocoaDaddy Год назад

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!!!!

@marcosfavarao938 4 месяца назад

man, How can i get this course? Where can i watch? Do you have a link?

@TheCocoaDaddy 4 месяца назад

@@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!

@wpeasy Год назад

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.

@frankiefab Год назад

I'm a big fan of CSS grid. Thank you for the tips Kelvin.

@rafaelcipriano6287 Год назад

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.

@theodorealenas3171 Год назад

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.

@mparth35 Год назад

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.

@KevinPowell Год назад

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.

@chotai Год назад

@@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!!

@mparth35 Год назад

@@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🥲

@AntiAtheismIsUnstoppable Год назад

@@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.

@Frostbytedigital Год назад

@@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.

@nataliakaraseva8630 Год назад

Thank you very much! Very clear and interesting to watch!

@KimKim-no1lu Год назад

Thank you, always! Another great content and I love your new haircut! 😊❤

@timm.7740 Год назад

thanks for all your great content!

@kaveengoonawardane9651 Год назад

Great video Kevin. Thanks!

@sbtopzzzlg7098 11 месяцев назад

Very informative and helpful, thanks Kevin! :)

@davebudah Год назад

Thank you for these great tips.

@ubtonai.online7988 Год назад

i am never see your tutorials. But now i see, you amazing teacher. Thank for the awesome tutorials

@HadrienMatringe Год назад

Great video, thanks!

@CodeOpacity Год назад

Very useful. Thanks for the info

@theGamerZed Год назад

Another epic CSS video 🔥👍💙

@NNNedlog Год назад

Awesome video as always sir

@amjedh7133 Год назад

am learning a lot form ur videos thanks for the effort

@DragonRoyZ Год назад

Cool stuff. Thanks!

@BurritoBrooks Год назад

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.

@KevinPowell Год назад

Yeah, flexbox 100% has it's uses! But I use grid for a lot of stuff these days

@BurritoBrooks Год назад

@@KevinPowell Nice! I’m on the right track then.

@kishirisu1268 4 месяца назад

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.

@juanmonster6232 Год назад

I used this for a project today......Thank you very much

@ynotpeanutbutter Год назад

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.

@tedreams Год назад

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 😊

@typeguard 3 месяца назад

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.

@UnnDunn Год назад

My mantra is “Grid for laying out containers, flex for laying out content.”

@aleksandr95 Год назад

Thx, Kevin!

@duncan9992 Год назад

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!

@chriswagoner3316 Год назад

Thank you.

@motiondesign2501 Год назад

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.

@montebont 3 месяца назад

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 ;-)

@JayCeeGee Год назад

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.

@androidetube Год назад

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

@MrKOHKyPEHT Год назад

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)

@ejazmuneeb Год назад

awesome very helpful.

@carloschaves8892 7 месяцев назад

I love you Kevin

@oscarmcclenton6279 Год назад

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!! 🧑🏼‍💻🤝🏻

@KevinPowell Год назад

For #1 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MywezIxlp8Y.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).

@seanstanley252 Год назад

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.

@FazilAhamedK Год назад

A timely drop indeed. I am currently designing a cards design for a website.

@aram5642 Год назад

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!

@maxivy Год назад

I've always hated CSS. Your channel helps a lot. Thank you.

@lawrencedoliveiro9104 Год назад

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.

@TomasMisura Год назад

it's obvious that combination of flexbox and grid is very powerful

@MrJettann Год назад

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!

@KevinPowell Год назад

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

@giorgiobellisario Год назад

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. 🤯

@brteller Год назад

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.

@windmaomao Год назад

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.

@GameFuMaster 8 месяцев назад

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...

@MiguelFelipeCalo Год назад

I find flex better at semantics, readability, and utility. Ex. bootstrap's container -> row -> col

@dagoeneko Год назад

grid: auto / auto-flow 1fr; is definitely one of my most used css rules.

@Z3ROR Год назад

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.

@dugannash9109 Год назад

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.

@Bansh33 Год назад

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

@dugannash9109 Год назад

@@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.

@Bansh33 Год назад

@@dugannash9109 I agree! have to check that one, thank you

@centrumsaiyan7623 Год назад

At least I can spend time mastering grid without worries now.

@aryasutrisna6961 Год назад

widh: calc(100% - 60px) & space between 😁

@Nightrapture Год назад

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.

@Andres_cali Год назад

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

@markrobershorts Год назад

The haircut 👌

@markpatrickwhite Год назад

Opinions on the "grid for layout, flex for components" guideline?

@usmanshahid8529 Год назад

People use flexbox over grid because most browsers support it ☺️

@alexbaa9998 Год назад

display: flex justify-content: space-evenly

@kapa4208 Год назад

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.

@KevinPowell Год назад

Yup, good use case for flex there :)

@blejac948 Год назад

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?

@kapa4208 Год назад

@@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".

@blejac948 Год назад

@@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.

@kapa4208 Год назад

@@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.

@pahtashow Год назад

Is flexbox is better for SEO and speed or grid is better for SEO and page load ?

@alimodz6253 Год назад

also to add grid gap works on older browsers than flex

@simon.tomtom.design Год назад

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!

@WyzrdCat 10 месяцев назад

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.

@freeeeplay Год назад

What about just... setting a fixed width on the columns? flex-grow: 1; width: 300px; (where it'll wrap)

@CottidaeSEA 3 месяца назад

If all children should have the same size, grid is usually the best option.

@markons9391 Год назад

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

@18.j Год назад

My man internet explorer support grid tf you are talking about iphone 3g browser?

@markons9391 Год назад

@@18.j I'm just saying facts. I'm working as a developer and I need to check on many devices

@lawrencedoliveiro9104 Год назад

Apple’s browser is crap. Is it really worth the headaches to pander to them?

@lawrencedoliveiro9104 Год назад

@Ghots But the USA only accounts for something like 20% of the world market.

@arunsaklani9890 8 месяцев назад

Sir to avoid height for background image how to give height without using height using flexbox or grid plz reply😊

@BK-qx3qf Год назад

You should just add "cta" class in first div wrapper UNDER column div. Column div should never be messed with. :) Friendly advice-

@KevinPowell Год назад

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.

@davidvoskanyan5783 Год назад

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?

@KevinPowell Год назад

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.

@chotai Год назад

@@KevinPowell so are you going to put that update in upcoming video or anything else ..?

@davidvoskanyan5783 Год назад

@@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)

@LoveCaseOh Год назад

I’m using width:33.3%; and float:left;

@pesicon8674 Год назад

Why u don't use display: grid; grid-template-colums: repeat(auto-fit,minmax(min(100%,200),1fr)) ?

@weblearningd2294 Год назад

I prefer grid but i think there is Cross browser problem with it. Do you have any solution for that issue?

@lawrencedoliveiro9104 Год назад

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?

@hudadamar21 Год назад

can grid create layout like this on list article? --- --- --- --- ---

@eurosat7 Год назад

I wonder if box-sizing does affect flex.

@KevinPowell Год назад

Not for what I looked at here

@alexkiiru1283 4 месяца назад

nice mohawk 😅😁

@LuBre Год назад

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.

@hahabanero Год назад

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

@davien001 Год назад

Place-items: center;

@hahabanero Год назад

@@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.

@davien001 Год назад

@@hahabanero align-self: center; justify-self: center; On Child element;

@MrJgracias 11 месяцев назад

Why not just use relative position and absolute position?

@JonathanPyper Год назад

Are you using Firefox Kevin?

@JonathanPyper Год назад

Sorry i see that you are :)

@lebster_ Год назад

Would box-sizing: border-box; not fix this?

@KevinPowell Год назад

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.

@TommieHansen Год назад

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.

@forbiddenera Год назад

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

@ahmadmuraish1144 Год назад

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

@maksz4656 Год назад

How to make equal width columns if one of the children has a border?

@KevinPowell Год назад

Grid will work there too :D

@maksz4656 Год назад

@@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.

@PeterSedesse Год назад

None of this make sense to me. There are clearly times when grid is better than flexbox, but are there any instances where flex is clearly better than grid? I think flexbox only exists because of inertia of people who started before grid was a thing.