Stop the Flexbox for 1D, Grid for 2D layout nonsense
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Flexbox is great at some 2D layouts, and Grid can be a better choice for 1D layouts as well, so let's stop that being how we decide which one we're going to use, because often it leads us down the wrong path.
🔗 Links
✅ Code from first example: codepen.io/kevinpowell/pen/ab...
✅ Code from second example: codepen.io/kevinpowell/pen/XW...
✅ Diving into how flexbox works: • Do you understand how ...
✅ Easy way to get started with Grid: • Get started with grid ...
⌚ Timestamps
00:00 - Introduction
00:25 - Why Grid might be better for 1D some layouts
04:35 - Why Flexbox might be better for some 2D layouts
06:45 - Grid gives you more control on sizing, flexbox is better for letting the children have control
#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 TH-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!
One might say grids are better for grid like layouts, and flex for flexible layouts
Oh you
Like var for variables and const for constants.
😂@@CristianKirk
XD
Now, define flexible and grid layout you smarty
If the elements should all be the same size as each other, grid is better. If the elements should each have unique sizing or determine their sizing in unique ways, then flex is better. You can do most things with both, it's just which is easier.
I honestly consider you are THE best css teacher ever! It's been a while since I've seen one of your videos, as in the last year my career has shifted to backend dev, but the knowledge I gain from every single one of your videos is amazing. Thank you so much for the great work you do!
I came back to web development from the days when you structured sites using tables! So grid seemed to be so much more straightforward and structured that flex, but your description hear makes the most sense I've ever seen or read about the differences. Thanks
I just created a new list called 'Amazing CSS videos', just to keep this one close. Very ilustrative! Your content is pure gold, Kevin! Thanks for sharing
You absolutely nailed it with this vid mate, biggups
This tip has been helpful for me most of the time when deciding between flex and grid:
Use flex when the parent is a list and adding or removing children does not require any changes in the layout related code. For example, list of links in footer, list of social media icons, list of cards, etc.
Use grid when there is a fixed number of children. For example, card with icon, title and description, the main layout of the page (navbar, sidebar, main content, footer).
Everytime I learn something new from your channel. Thank you CSS God!
You get such a good like to views ratio on your videos because of content like this. Not too long, not too short, informative. We could do with Kev’s in a bunch of other different avenues of tech.
I often just use flex for everything unless I want a table-like structure. Interestingly at work most colleagues use grid for everything instead, unless the specific behavior of matching content size is needed.
One thing that's worth mentioning, grid is way easier to make responsive. you just start with 1 column, media query to something large for 4, medium for 3, small for 2 and you're good to go. Flex isn't as easy, unless you only have one breakpoint and can switch direction there.
Part of the reason grid (or anything else) seems so complicated is people tend to just experiment with it rather than go the documentation and learn it. The documentation for grid and flexbox is excellent. Kevin doesn't just know this stuff by magic, he actually learns it. It can be quite interesting to go through the different options in the documentation and see what they do. Thankfully, there is also people great at explaining the options like Kevin.
You'd be surprised about my previous job in a web dev agency, where I solved 99% of my colleagues problems by copying the first answer from google into our chat... I was literally blamed when a colleague couldn't do anything the entire week because I didn't respond. She could've just copied the error message from the browser console into google herself and got the answer in the first stack overflow result but it's my fault lmao
Thank you sir! I didn’t know flex basis only looks at the content box regardless of the box sizing value. I think this has been a long missing piece for me, and now I feel I have fully mastered flex box.
I don't know if I said this on any of your videos or not but you actually made me fall in love with default css ❤
You are the best teacher ever.
I always use flexbox and never had a problem even with responsive view
top notch tut thxs
Grid - parent container control content distribution
Flexbox - content distribution is defined by content sizing itself
Great video! Video request: Best way to responsively style a blog post? In particular, a floating table of content / social share bar, images, content etc.
That was so useful bro
I also think a good use of grid vs flex is if you want elements to be laid out in a grid differently at different breakpoints. For example, at desktop size, I might have an image on the right and text on the left of a basic 2-column horizontal layout, but then at mobile sizes, I want the image to display underneath the text in a 2-row layout. I know flex could work for this very basic example, but I’ve used this for making many changes to the layout of something like a card as the screen size decreases, without using a different element or lots of display property changes.
Man your videos are absolutely PURE GOLD! You awesome!
I feel that a lot of devs are kinda of tethered to old concepts, and they are teaching new devs with these old concepts. The result is a lot of mixing of old concepts with (sometimes) new techniques, creating a code that's hard to maintain and mainly unreliable.
IMHO, things like Tailwind kinda prevent devs to learn such techniques, concepts and real modern CSS. So that's why your channel is SO AWESOME. Thanks
Great content!
I am definitely guilty of reaching for flexbox because of familiarity. But I grabbed some amazing tips on using grid from another one of your videos and use it on basically all of my sites.
After your video I realized the importance of specialization in every field. Like you are only an expert in CSS at a kind level. We should always focus on one thing first.
One important benefit of using grid is that it reduces nesting of element. This reduces element count and thus leads to performance improvement. This can be useful in improving Lighthouse score.
For example, if there is a card with an icon on left and title and description on right, grid can have all three elements at same level in DOM tree, while in flex, the title and description elements have to be wrapped in an extra element. So, one less element in grid.
This is why I've always said flex cares about about one layout direction, Grid cares about both. Otherwise they're very similar which makes sense since Grid is build on Flex under the hood.
One of the things back when Grid first came out was it seemed like using Grid could actually cause layout performance issues vs. Flexbox so if you only wanted one direction you just did Flex. That's largely not a thing anymore, though but the advice (boiled down to simple statement so juniors know what to do) never updated.
More and more I find myself defaulting to Grid, though. It just flows more reliably.
grid is not build on flex under the hood :) stop talking bullshit, maybe async/await is build on promise? :))
Where I use grid a lot is when you get those annoying layouts that have content in different positions on desktop and mobile. I hate duping content so will use grid-template-areas. Really handy.
The only place in layouts grid falls down is you can’t center the items like in flexbox. So you’ve got 4 col list of cards and the last couple of items are on their own line. Flexbox can obviously centre these easily. If grid could somehow do similar it would be great.
THIS IS INSANELY GOOD! I just love it!
Flex = fill in stuff --- Grid = organise stuff
Great video. A very common misconception
Im learning from you lot of things and I have got your point when you explaining when to decide what to use for specific layout and this will become some way intuitive with experience. BUT... when it comes to explain to a beginner difference between these two I will still use 1D & 2D as you say "nonsense" because IMO it is for beginners easier to understand as introduction and starting point.
I think that sets them up for issues going forward though, because that's the model they'll follow as they gain more experience. I see very experienced devs who still use that as their approach, and it leads to them having to create more complex solutions because of it. It's also why I like teaching grid first now. Not all of it, but the very basics of it. It gives them an idea of how it works, and they feel comfortable with it because everything sort of does what you tell it to do. But then, it's easy to find examples like a navigation, or other more "inline" things where flex is just perfect, and it fills in that gap where grid doesn't really work well.
All that to say, I don't think my way is the only way to teach something, I'm just wary of teaching something where I have to tell people later on that "well, actually..."
@@KevinPowell Look, I have got your point but we're looking on these niche "issues" from our experienced devs perspective. I would like to see faces of dev beginners when watching this video as IMO they would have not a clue what you are talking about and why it is an issue. I see that many new "devs" use these days CSS Grid only because they do not know what is "flex-basis", "flex-grow" etc. and how to work with these. They just set `display: flex` and that's it. CSS Grid is for them easier to use 🙃. That is my point, explain it in simplest way as possible that they will understand eg.why will be better use Flex for navigation instead of Grid etc. 🤷♂
hey kid, you can walk, "well, actually..." you can also run. 🤫
For me this is how I distinguish them:
Flexbox : child control layout, uneven widths, uneven scaling of children width like when required to center children wrt parent for uneven childrens.
Grid: parent control layout, fixed widths, fixed layout and even scaling of childrens width.
I wish Kevin had tutorials on more languages such as JS,PHP or C++.. Hands down the best teacher on TH-cam
I was asked this in an interview and I gave them the same 1D, 2D logic 🙃.
My previous technical leader was worse. It wanted us no never user flex, because “now, there’s grid that can do everything”.
0:17 Quote _"You don't have to tell them they're wrong, you can just send them this video"_
That would be great, except for the fact that this is a *highly nuanced and opinionated topic* where the answer is in the subtleties of different perspectives.
For example, when teaching a beginner, it's much easier to help them get up-to-speed by understanding the difference in intention between Flexbox and CSS Grids. Beginning by explaining that one is designed more with 1D in mind and other is designed more with 2D matrices in mind, is very helpful.
I'm a big fan, Kevin, but ignoring critical thought or unique perspectives, in favor of forwarding generic advice, I don't believe that's the best approach for such a nuanced topic.
I disagree with teaching it that way to a beginner. I feel like it simply builds bad habits they have to break later. I think it's easy to keep both of them simple, without going down that route. I prefer starting with grid, because it's easier to understand how it's working (there is less "magic" to it). You make a grid, you place items in the grid (not diving into *everything* there is to know about grid, of course). You quickly run into the limitation when you want items next to each other that take up different amounts of space (like a navigation), and flex then comes to the rescue. I've had a lot of success with people taking that approach, and as they gain more knowledge of both flex and grid, they have a good baseline of what the strengths are for both of them.
I'm also going to say that intro was a little bit of a joke, and I realize there is a lot of nuance in all of this :)
Thank God i never thought that way of one is better for 1D and other is for 2D. I just go with the one works better and/or is easier to use on a case by case basis.
amazing, I actually changed my mind mid vídeo
I could not agree with this more!!!
thanks alot
i once hat a problem. i wanted a 2 column layout with tiles and used flexbox. when i added a gap it would break the 2 by X thing and i got 1 column instead. this resulted in weird behavior. I replaced the flexbox with a 2 column grid and now its working nicely. Sometimes i still get confused in what to use when. because flexbox seemed fitting for me but it wasnt. This video clarifies stuff for me. :)
I wish my mind could grasp Grid at all. Reading it is like "I will never remember all of this syntax" on top of how much of a nightmare editing themes from someone who used Grid tends to be. I'm sure it's just a matter of finding a breakdown that parses properly for my mind, but currently grid might as well be an ancient dead language to my mind.
The reason for this rule of thumb isn't that everyome believes you can only do 1D with flex, or only 2D with grid. Just that it often becomes the best choice.
As long as designers keep designing structured, gridlike layouts in 2D but with arbitrary, flexible layouts in individual rows or columns, this convention will remain
Really, the clue is in the name for me. If I want a structured grid system I will use Grid. If I need to control the layout of items on a page, flexbox is excellent
Grid may have non-obvious behaviour with min-width when we run into unexpected scroll bar. It would be great if you show how it definitely works and how to solve that problem.
Cool content as always.
By the way “Hic!” is nose in Ukrainian language. (5:43 pre last box). Happy learning)
In that 2nd example, the grid layout, on a width where you have 3 columns; How would you make the last cell with the text "Sequi". span until the last grid line in a dynamic way? I'm not 100% up to date with the latest grid stuff, but can grid do this? Or do we still need to flex it?
i like the camera layout
On my custom WordPress theme, I let the user define the total content width (ex. 1920px). Then I divide this into 12 equal blocks, minus 11 small blocks for the gap between them. The result of each block's width I name it --x-1. Then I create 12 different classes: --x-12 : has width equal to 12 blocks. --x-11 : has width equal to 11 blocks, and so on until --x-1. Finally the user, assuming they want to create a 3-column layout, they simply add a class name of .x-3 in all 3 children and the parent has a .x-9 class name and a simple display:flex; This way, by using simple flexbox, the user can just write Bootstrap-like class names and never bother with writing CSS for basic layouts. The beauty of it is that it doesnt require a single line of CSS to make them responsive. I use flexbox mostly because I find it straightforward and I use grid on complex layouts.
I never understood the argument between "1D" and "2D" either. I use grid or flex depending on the need of the layout.
6:29 - imho this does not refer to a 2d layout, as those tags/pills/items are a 1 dimensional list floating linear based on the contents.
2d would be having a 3 by 3 grid and placing one item in the top right and one item in the bottom left without any items in between.
You're awesome man ❤
Thanks for sharing helpful knowledge 😊❤
Hello Sir how can i make grid direction reverse
You can fix the fact that box-sizing: border-box; isn't working on the flex item (with padding) by setting the following on the flex item
/* Assuming box sizing is "border-box" on all elements */
* {
box-sizing: border-box;
}
.flex > * {
flex-basis: auto;
min-width: 0;
width: fit-content;
padding: 10px;
}
It's only that flex-basis doesn't work with box-sizing since flex-basis targets the content-area of the box inside the flex item not the flex item itself.
That works the same, you can see it in this codepen: codepen.io/kevinpowell/pen/XWLXjzW
It has nothing to do with width or flex basis, but how the grow/shrink is calculated by flexbox. Flexbox only looks at the content size for calculating that. If it didn't, it would result in the padding growing/shrinking as well, which people would not be happy with, lol.
Flexbox looks at the content size only, will make the content size the same for all of them if it has to grow or shrink them, then add border + padding after that.
hey kevin thanks for ur videos i need some help please with how to turn a xd link to html css how to use them to make that website from that design respecting that design please i will be gratefull if u answer me
this is honestly crazy. I was just thinking about it this morning and was changing my mind.
What do I use for 4D Layouts?
The start of the video radiates "stop posting about among us" vibes so much
I went straight from divs in percent to grid so never bothered with flexbox.
One scenario where I find grid not doing its job is say when I have a header, body and footer. I want my header and footer to stick to their top and bottom edges of viewport, while I want the body to adapt its height based on the remaining viewport. With flex, I just give the child flex:1 and it does the job.
Maybe my understanding of grid is low. How do I do this with grid ? Anyone ?
🔥🔥🔥
start learning grid, already saw how powerful grid is, but still kinda confusing for me rn
I use grid for pages layout, dont if it’s right but works well
Same
@@matejlaskomulej nice! You on linkedin?
Grid for page layout is exactly what it's for though. This is what allows your layout to completely change based on screen-sizes without needing to script it.
Never heard about this... gonna keep using each of them depending on what I need/want.
I find myself liking your videos before watching them and by the end of the video wishing for double likes. 👍👍
I still don't know how to do design where i.e. on LG then we have 3 columns 3x33% but on MD we have 2x50% and 1 below 100%. For XS 3x100%. Any idea?
"Flex for alignment, grid for layout" - read that somewhere on the Internet and it stuck since.
I think this is a misunderstanding about what 1D and 2D means. All of your examples illustrate how grid has more built in control for rows AND columns (2D) where flex is only ever really concerned with rendering things as columns or rows (1D). Wrapping flex children does not make it 2D in the sense that the flex layout is concerned with the alignment of rows and columns. That's like saying floats are 2D because technically an author can create columns and rows using floated divs.
If you go back to the early teachings, Rachel Andrew reffered to 1D and 2D in the way you're mentioning. The problem is, being year that, and don't think of control, they think "1D layout" and "2D layout" and don't think more than that. Anytime I ask how people decide, the *large* majority of answers are the overly-simplified explaination I gave, and I think that's why we should avoid thinking of it that way, because most people hear the keywords and run with their first impression from those.
Grid isn't responsive per se that's my only issue with grid so I tend to use min-max auto-fit for such occasions.
I was just arguing about exactly this (1d Vs 2d) with one of my team members because he said he doesn't use grid for 1d layouts and I had to explain that grid gives u more control over the children
Thanks a lot! I will need to practice grid for 1D more.
I use grid everywhere, and only use flex when I feel grid is tooo verbose for that usecase.
Also flex grow, shrink and basis are still some of those css concepts that my head just fails to register 😂. So, yeah, grid ftw 😂
I see it now... Default to grid, use flex where grid does not reach 🧠
grid for absolute allocation of children, flex for relative
I am still worried about browser support so if i find a solution with flexbox i prefer flexbox.
Unless you work in a very specific environment (medical comes to mind, where they might still be running Windows XP), Grid's support is as good as anything else at this point.
on the second example u gave the titles from css pseudo-classes after "FLEXBOX/GRID". Why not usindo HTML ?
Cool
Flex is for flexing,
grid is for gridding. 👍
Use Grid if you want layout to control the content.
Use Flex if you want content to control the layout.
They are both super needed.
Depends on the use case.
why not just use "display: inline-block"?
It's not really a layout tool, which both flex and grid are :)
Inline block has it's use cases, but they aren't very frequent these days imo, with flex, and inline-flex. Flex opens up vertical center alignmnet, and we get `gap` instead of having to use margin, which is nice because it's only between the elements, among other things :)
Grid functionality should have just been part of Flexbox. No good reason to have two separate concepts with so much overlap.
Grid itself having overlap with table display but with more stuff.
This creates issues where initially you need functionality that could be done by flex or grid, or maybe even table, then later the requirements change and now you can’t use flex, you need grid, or grid requires wonky workarounds and you’re better off with flex.
Now you have to rework a bunch of things rather than just change/add/remove some attributes.
You end up needing to change the html, maybe add/remove grid breakpoints, rethink the overall setup.
For a Navbar flexbox would be better .
Grid is for Layout-Driven-Content
Flexbox is for Content-Driven-Layouts
I'm the proof!
Cuz I do something wrong, and is that I don't care about "grid"
But is just cause I have coded 30+ websites without it... I don't see a reason to use it
I prefer to base in flexbox, and my own styles
I have coded pretty complex layouts... You can code anything 'without' grid
People don't know how it was, before flexbox. Flexbox was the game changer... not grid
I feel this comes from Designers-only, who don't really know how it works. You hear that by Figma user who don't code, that: "auto-layout is like flexbox" when is not really either.
I feel designs end up more... gridy, when you are thinking on using "grid"
The problem is that flexbox doesn't give you full control, so in order for your flex layouts to work, you need to nest HTML elements (as you described, this is how it was done before flexbox as well). The main issue with nesting elements is that you can't make layout changes without scripting. i.e. if you have a mobile and a desktop layout of your app, you will need to have specific javascript code to handle the switches between the layouts. And if you're using a modern frontend framework like react you also get rerendering and stuff that you need to be careful with here. It also just in general makes your CSS and JS code way more complex.
This is the main reason why grid exists.
@@Luxalpa Grid didn't exist a few years ago, so anything you said makes too much sense
The websites I mentiomed I coded 4 years ago and back (as I don't code too much now a days)
I have coded VERY responsive layouts in Reacts, NextJs... Maybe you aren't as organized with your code, that's it
Any app you can think of, was able to be coded without Grid. Grid is relatively new... And it DOESN'T exist to solve the problem you mentioned, it just exists... And it has been a slow process to reach full browser compatibility
Grid is just a layout written in your CSS, too much CSS handling something that is best just handled in HTML and a bit of CSS
As Kevin said as well, Grid is too much gridy... You are placing elements within a fixed grid
Trust me, I can also use grid if I wanted, I don't...
@@Luxalpa You can perfectly create a Mobile and a Desktop, or better a Responsive App just by using HTML (or JSX) and CSS using Flexbox and other CSS and SCSS styles, without Grid
You can code Whatever You Want this way, without all the issues you mentioned
I've been making websites since the late 90s, so I know the pain of creating layouts pre-flexbox 😅. Flexbox was the game-changer, in that it gave us an actual layout tool, for sure... but while it's *fantastic*, it doesn't do it all. There are some layouts they can both do, and some will be a lot easier with Flex, and others a lot easier with Grid, and then there are layouts only one can create.
Since you came from table + float layout days, I feel like saying that you don't need Grid is the same as saying you don't need flex, because you have floats.
Grid makes *a lot* of layouts easier to create, and by not bothering with it, you're making life harder on yourself imo.
Grid is the coolest, neatest kind of display imo.
Nope. Flex-box team
I only do tables lol
You outed yourself, time traveller!
Grids are better for 2D layouts that should be static in nature, flex or grid can then be used to space children, using things like space between, yet flex box still has the advantage of being supported on older browsers where grid is not.
Grid's browser support is as good as anything else at this point. Unless you work in a very specific environment that has to support very old devices, you can use it without any issues.
I don't even know what 1D or 2D design is.
So I wrote my first div about a month a go. So a real noob. Which means I have no idea what 1D and 2D is.
A 10 second description of those in videos good for noobs like me would be useful.
grid can do everything flex can do better in my opinion
except for flex-wrap, thats when flex is useful
Now look at all your examples on Iphone 6 or lower
No sense to do this, even uf there's people still using those devices, it ain't what most people use!
Does it still connect to the internet?
Grid has been supported by iOS since 10.2, which is iPhone 4S and newer devices... All iOS devices together that don't support it account for less than 0.1% of global internet users...
Yeah and let's develop for iphone 1 and IE 1.0 as well...
Muppet.
so in a way it is still true, but clickbaity titles are even better.
Very cool video, thank you. Why do frameworks like bootstrap use flexbox for the grid? I find it too hard. Grid is easier to understand.
Bootstrap uses flexbox because bootstrap is older than grid and the framework was originally designed around flexbox.
A flex layout that wraps is still considered a 1d layout.
In terms of control over it, yes, but that's not how people see it when they think 1D or 2D. They see 1D as rows or columns, and they see 2D as rows *and* columns. I should have mentioned this in the video as well, because Rachel Andrew talked a lot about 1D vs. 2D in the early days of Grid, but not in terms of rows/columns, but in terms of control... the problem is, people don't go into the nuance of it, they go to the simplest way to make sense of it. Anytime I ask how people decide, the large majority of replies are based around the simple understanding of 1D and 2D, which is why I made this video :)
this is way too advanced for me😅
Grid supremacy
Cries in browser support
What did I talk about that doesn't have good browser support?