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
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 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
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 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.
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 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.
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.
Grid seems simple in toy examples like this, or if it's layout for your own website where you personally control all the content; but as soon as you're making webpages with dynamic content controlled by a customer, maybe even a customer who have very little understanding about layout and what looks good in general; the content will suddenly _never_ be this close in size. Even though it's technically an "edge case" to have one column with 4 times more content than every other in the "grid" in practice it becomes the average case so you have to handle it. And then the inherent focus on content over strict grid lines makes flex much easier to use. It's so much easier to make a flex based layout handle the occasional ridiculously long text or ocasionally missing or undersized image than with grid. With grid a missing image will either leave a massive gap where the image should be, or with a too small image it would either need to be stretched up to be normal size even if the resolution is too low, or it will leave a massive margin around the image. You can of course make a bunch of alternate layout classes and a ton of media queries and conditionals in the templates to handle bad or missing images better, but it's much easier with flex where you can simply allow the remaining content to use the extra space with no extra css needed. And with over or under sized text content it's even worse with grid because unless you're using monospaced font it's pretty much impossible to calculate how large the text is before it's actually being rendered in the browser; so while flex naturally will give a larger fraction of the space to the larger content even though it's not perfect it will tend to look less awkward with some boxes being slightly larger and containing more text than a grid with one box that either forces every other box on the same line to have several paragraphs of blank space on the bottom to accommodate the one with a lot of text or have overflow or text clipping. Arguably in _some_ cases if the grid is only listing articles, you can justifiably truncate the text or you already control the max length in the template by not outputting more than some number of characters. But in many other cases truncating the text is _not_ an option because the content _is_ the actual content and not just a link to another page: e.g. you cannot just remove parts of the text in a menu link; or in a set of fact boxes inside an article, or remove some of the ingredients of a product just because the product have stupidly many ingredients (that's literally illegal, they all have to be listed) so you usually have to handle stupid content and the nice grid filled with equally long Lorem-ipsum that designer worked with has to yield to the content. With some content (the content that isn't legally required to be whatever length it is) you can ask the editors nicely to restrain themselves and write shorter texts, but they will often ignore you and often the content comes from a 3rd party you have no control over anyway so you cannot just let the layout completely break just because the content doesn't fit the design.
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.
I wish Kevin had tutorials on more languages such as JS,PHP or C++.. Hands down the best teacher on TH-cam
6 หลายเดือนก่อน
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.
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.
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
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. :)
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.
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
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 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.
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.
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?
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.
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).
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.
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.
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
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 ?
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.
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.
I don't want to pick a fight with Grid, but I'm on day 3 of trying to force it to display cell items at the same size, which is supposed to happen or of the box. Frustrating.
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.”
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
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
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.
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. 🤫
Use grid when you want predictable & explicitly defined layouts, use flex when you want insanity & time wasted crawling through css to find what seemingly unrelated piece of css is making flex misbehave! .......... In all seriousness I'm a fan of using grid-template-areas with flex inside as it lets me keep the overall layout predictable whilst also handing some of the aspect ratio/resolution shift over to flex. Maybe that's "nonsense" because it's using flex for 1D & grid for 2D but I'd argue that flex was never implemented that well given how unpredictable it can be even past the beginner level, especially if you're updating older layouts to include it & I remember the nightmares of converting float to flex. That said Javascript & HTML were fairly poor at the job even back in the 90s (CSS a little later) yet instead of coming up with something better we still use them now & have just tacked on a load of additions/libraries/frameworks to try & compensate for the fact they were never great at the job in the first place.
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.
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'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.
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.
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.
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...
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.
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.
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
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 liked the way how easily flex became an element of grid. So powerful. Thanks for sharing!
Everytime I learn something new from your channel. Thank you CSS God!
You are the best teacher ever.
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
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
Grid - parent container control content distribution
Flexbox - content distribution is defined by content sizing itself
Man your videos are absolutely PURE GOLD! You awesome!
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.
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 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.
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 always use flexbox and never had a problem even with responsive view
Grid seems simple in toy examples like this, or if it's layout for your own website where you personally control all the content; but as soon as you're making webpages with dynamic content controlled by a customer, maybe even a customer who have very little understanding about layout and what looks good in general; the content will suddenly _never_ be this close in size. Even though it's technically an "edge case" to have one column with 4 times more content than every other in the "grid" in practice it becomes the average case so you have to handle it. And then the inherent focus on content over strict grid lines makes flex much easier to use.
It's so much easier to make a flex based layout handle the occasional ridiculously long text or ocasionally missing or undersized image than with grid.
With grid a missing image will either leave a massive gap where the image should be, or with a too small image it would either need to be stretched up to be normal size even if the resolution is too low, or it will leave a massive margin around the image. You can of course make a bunch of alternate layout classes and a ton of media queries and conditionals in the templates to handle bad or missing images better, but it's much easier with flex where you can simply allow the remaining content to use the extra space with no extra css needed. And with over or under sized text content it's even worse with grid because unless you're using monospaced font it's pretty much impossible to calculate how large the text is before it's actually being rendered in the browser; so while flex naturally will give a larger fraction of the space to the larger content even though it's not perfect it will tend to look less awkward with some boxes being slightly larger and containing more text than a grid with one box that either forces every other box on the same line to have several paragraphs of blank space on the bottom to accommodate the one with a lot of text or have overflow or text clipping.
Arguably in _some_ cases if the grid is only listing articles, you can justifiably truncate the text or you already control the max length in the template by not outputting more than some number of characters. But in many other cases truncating the text is _not_ an option because the content _is_ the actual content and not just a link to another page: e.g. you cannot just remove parts of the text in a menu link; or in a set of fact boxes inside an article, or remove some of the ingredients of a product just because the product have stupidly many ingredients (that's literally illegal, they all have to be listed) so you usually have to handle stupid content and the nice grid filled with equally long Lorem-ipsum that designer worked with has to yield to the content. With some content (the content that isn't legally required to be whatever length it is) you can ask the editors nicely to restrain themselves and write shorter texts, but they will often ignore you and often the content comes from a 3rd party you have no control over anyway so you cannot just let the layout completely break just because the content doesn't fit the design.
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.
I wish Kevin had tutorials on more languages such as JS,PHP or C++.. Hands down the best teacher on TH-cam
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.
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.
Cool content as always.
By the way “Hic!” is nose in Ukrainian language. (5:43 pre last box). Happy learning)
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
Flex = fill in stuff --- Grid = organise stuff
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 learned grid before flexbox and found it much simpler to grasp.
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.
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
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? :))
That was so useful bro
My previous technical leader was worse. It wanted us no never user flex, because “now, there’s grid that can do everything”.
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.
I was asked this in an interview and I gave them the same 1D, 2D logic 🙃.
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 :)
Great video. A very common misconception
Do you have a video where you explain how to center leftover items in a column setup?
I have something coming out tomorrow on that 😅
@@KevinPowell Thank you very much, appreciate the great work of yours😁
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?
Great content!
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.
top notch tut thxs
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 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?
amazing, I actually changed my mind mid vídeo
I could not agree with this more!!!
Have you ever created a complete website or page using only GRID?
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.
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.
guys, how to make grid items with borders that don't overlap each other?
THIS IS INSANELY GOOD! I just love it!
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
The start of the video radiates "stop posting about among us" vibes so much
Hello Sir how can i make grid direction reverse
Use Grid if you want layout to control the content.
Use Flex if you want content to control the layout.
I never understood the argument between "1D" and "2D" either. I use grid or flex depending on the need of the layout.
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.
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;
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.
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.
I find myself liking your videos before watching them and by the end of the video wishing for double likes. 👍👍
What do I use for 4D Layouts?
on the second example u gave the titles from css pseudo-classes after "FLEXBOX/GRID". Why not usindo HTML ?
I don't want to pick a fight with Grid, but I'm on day 3 of trying to force it to display cell items at the same size, which is supposed to happen or of the box. Frustrating.
I went straight from divs in percent to grid so never bothered with flexbox.
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.”
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
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
i like the camera layout
"Flex for alignment, grid for layout" - read that somewhere on the Internet and it stuck since.
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.
start learning grid, already saw how powerful grid is, but still kinda confusing for me rn
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. 🤫
Use grid when you want predictable & explicitly defined layouts, use flex when you want insanity & time wasted crawling through css to find what seemingly unrelated piece of css is making flex misbehave! .......... In all seriousness I'm a fan of using grid-template-areas with flex inside as it lets me keep the overall layout predictable whilst also handing some of the aspect ratio/resolution shift over to flex.
Maybe that's "nonsense" because it's using flex for 1D & grid for 2D but I'd argue that flex was never implemented that well given how unpredictable it can be even past the beginner level, especially if you're updating older layouts to include it & I remember the nightmares of converting float to flex.
That said Javascript & HTML were fairly poor at the job even back in the 90s (CSS a little later) yet instead of coming up with something better we still use them now & have just tacked on a load of additions/libraries/frameworks to try & compensate for the fact they were never great at the job in the first place.
this is honestly crazy. I was just thinking about it this morning and was changing my mind.
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.
You're awesome man ❤
I see it now... Default to grid, use flex where grid does not reach 🧠
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 😂
Grid is for Layout-Driven-Content
Flexbox is for Content-Driven-Layouts
Never heard about this... gonna keep using each of them depending on what I need/want.
grid for absolute allocation of children, flex for relative
Flex is for flexing,
grid is for gridding. 👍
thanks alot
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.
Thanks for sharing helpful knowledge 😊❤
For a Navbar flexbox would be better .
They are both super needed.
Depends on the use case.
Let's go 1 Mi \o/
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.
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.
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 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.