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!
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.
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 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
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
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
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.
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. 🤫
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.
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.
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.
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.
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 :)
3 місяці тому
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.
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
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.
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.
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
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).
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.
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. :)
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.
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.
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.
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 like to give to flexbox content instead of flex basis, grow, shrink, for example if i want 3 items in my row then i would give the flexbox items max-width: calc(33.333% - 32px) ;and here 32px is the gap and this make that even if there are more than 3 cards there would only be 3 cards in 1 row
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
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.
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.
08:02 Dear Kevin, I'm sure you'll agree with me that when "the parents" are in control of "the children", that becomes the solution. Nice tutorial, as always.
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.
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.
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
As I understand it, Flexbox makes its calculations in one direction while Grid makes it calculations in two directions. But I think this has been misinterpreted as “Flexbox is for one-dimensional layouts while Grid is for two-dimensional layouts.”
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?
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.
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 ?
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 😂
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.
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.
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 :)
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.
This is completely wrong. Flexbox *is* one-dimensional and Grid *is* two-dimensional. It's written this way in the specifications and explained using exactly this terminology at MDN. Naturally you can create different kinds of layouts with different combinations of flex and grid, but that doesn't mean the actual definition and purpose of the methods is "nonsense". ## problems - I know that people often ask if they should be using Flexbox or Grid and they don't expect the answer to be "it depends". - I know that people often ask which one is better or if Grid has superseded Flexbox. - I know that people with a simplistic understanding will only consider flex for 1D layouts and grid for 2D layouts. I know you're trying to address that third one, but you're starting by undermining what we've already learned from many other sources. This video doesn't solve any of these problems and it will do more harm than good when someone with your following seemingly contradicts what most CSS experts / enthusiasts are saying.
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
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!
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 liked the way how easily flex became an element of grid. So powerful. Thanks for sharing!
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 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
You absolutely nailed it with this vid mate, biggups
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
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
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.
You are the best teacher ever.
Everytime I learn something new from your channel. Thank you CSS God!
Man your videos are absolutely PURE GOLD! You awesome!
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. 🤫
Grid - parent container control content distribution
Flexbox - content distribution is defined by content sizing itself
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 ❤
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.
I wish Kevin had tutorials on more languages such as JS,PHP or C++.. Hands down the best teacher on UA-cam
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.
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.
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.
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.
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
I learned grid before flexbox and found it much simpler to grasp.
I always use flexbox and never had a problem even with responsive view
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.
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.
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
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).
I could not agree with this more!!!
Flex = fill in stuff --- Grid = organise stuff
Great video. A very common misconception
I was asked this in an interview and I gave them the same 1D, 2D logic 🙃.
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? :))
My previous technical leader was worse. It wanted us no never user flex, because “now, there’s grid that can do everything”.
amazing, I actually changed my mind mid vídeo
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. :)
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.
That was so useful bro
Cool content as always.
By the way “Hic!” is nose in Ukrainian language. (5:43 pre last box). Happy learning)
top notch tut thxs
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.
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.
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.
Use Grid if you want layout to control the content.
Use Flex if you want content to control the layout.
THIS IS INSANELY GOOD! I just love it!
The start of the video radiates "stop posting about among us" vibes so much
I like to give to flexbox content instead of flex basis, grow, shrink, for example if i want 3 items in my row then i would give the flexbox items max-width: calc(33.333% - 32px) ;and here 32px is the gap and this make that even if there are more than 3 cards there would only be 3 cards in 1 row
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
Great content!
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.
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.
08:02 Dear Kevin, I'm sure you'll agree with me that when "the parents" are in control of "the children", that becomes the solution. Nice tutorial, as always.
i like the camera layout
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.
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.
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
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.
this is honestly crazy. I was just thinking about it this morning and was changing my mind.
I never understood the argument between "1D" and "2D" either. I use grid or flex depending on the need of the layout.
Never heard about this... gonna keep using each of them depending on what I need/want.
thanks alot
As I understand it, Flexbox makes its calculations in one direction while Grid makes it calculations in two directions. But I think this has been misinterpreted as “Flexbox is for one-dimensional layouts while Grid is for two-dimensional layouts.”
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?
Flex is for flexing,
grid is for gridding. 👍
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?
grid for absolute allocation of children, flex for relative
I went straight from divs in percent to grid so never bothered with flexbox.
Have you ever created a complete website or page using only GRID?
Thanks a lot! I will need to practice grid for 1D more.
on the second example u gave the titles from css pseudo-classes after "FLEXBOX/GRID". Why not usindo HTML ?
start learning grid, already saw how powerful grid is, but still kinda confusing for me rn
I see it now... Default to grid, use flex where grid does not reach 🧠
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.
Grid is for Layout-Driven-Content
Flexbox is for Content-Driven-Layouts
guys, how to make grid items with borders that don't overlap each other?
"Flex for alignment, grid for layout" - read that somewhere on the Internet and it stuck since.
You're awesome man ❤
Hello Sir how can i make grid direction reverse
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 ?
grid-template-row: auto 1fr auto;
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 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.
Cool
They are both super needed.
Depends on the use case.
I find myself liking your videos before watching them and by the end of the video wishing for double likes. 👍👍
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.
🔥🔥🔥
What do I use for 4D Layouts?
Thanks for sharing helpful knowledge 😊❤
grid can do everything flex can do better in my opinion
except for flex-wrap, thats when flex is useful
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 :)
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.
For a Navbar flexbox would be better .
I only do tables lol
You outed yourself, time traveller!
Grid is the coolest, neatest kind of display imo.
Nope. Flex-box team
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.
Grid supremacy
This is completely wrong. Flexbox *is* one-dimensional and Grid *is* two-dimensional. It's written this way in the specifications and explained using exactly this terminology at MDN.
Naturally you can create different kinds of layouts with different combinations of flex and grid, but that doesn't mean the actual definition and purpose of the methods is "nonsense".
## problems
- I know that people often ask if they should be using Flexbox or Grid and they don't expect the answer to be "it depends".
- I know that people often ask which one is better or if Grid has superseded Flexbox.
- I know that people with a simplistic understanding will only consider flex for 1D layouts and grid for 2D layouts.
I know you're trying to address that third one, but you're starting by undermining what we've already learned from many other sources. This video doesn't solve any of these problems and it will do more harm than good when someone with your following seemingly contradicts what most CSS experts / enthusiasts are saying.