Why I use grid over flexbox for this common layout

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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

[PhilLesh]

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.

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

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

[mparth]

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.

[siriusgd]

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.

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

[theodorealenas]

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.

[duncan]

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!

[frankiefab]

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

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

[rpf]

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

[rafaelcipriano]

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.

[zachjensz]

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

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

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

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

[ubtonai.online]

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

[juanmonster]

I used this for a project you very much

[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 😊