If we want a FLEXIBLE layout (the layout adapts to fit the content), we use flex. If we want a more fixed layout (the content adapts to fit the layout), we use grid.
As a mostly backend developer, every time I have to use CSS, it feels like I'm starting over. Your videos are my go-to resource to refresh and add to my CSS understanding.
@@userhenrolwest Hey! the inspiring backend developer hasn't replied yet. Are you still waiting or have you started working on something, Henrol West? if you are curious, how I know you're from India? Typically, only people from India ask questions in that manner.
My rule: if I can't achieve it easily with flex, I'll pivot to grid. Flex is the go-to choice. But I have to admit that I have less experience with grid than with flex, so that definitely plays a role in the decision. And simply by the amount of choices you have, you can conclude that grid is quite a bit more complex.
Grid feels like JS not CSS. It's poorly implemented and doesn't belong in the language, but no going back now. Basically grid was their prototype at trying to get away from floats, then with flex they actually did it right.
You have made quite a few videos recently on flexbox and grid but I find the repetition enormously helpful. The basic principles are getting hammered in and I find I can now use them much more confidently. Keep on going and thank you!
I tend to use grid for overall layout of the web page or for larger components. While Flexbox often helps me with Individual components, basically I use it on the smaller scale.
I do the same, except grid for the overall page design and if there is one grid where there is a complex layout (ie: a main page), I would use flexbox... NOT! I use a sub-grid instead. Flexbox is strictly for when I don't care about position exactly. I spent way too much time on flexbox to find out it still doesn't do what I want as the screen size changes.
Amazing demonstration! Kevin is the undisputed MVP! These clicked for me: - in flexbox each row/column is independent of the others - use flexbox when intrinsic sizes are important or useful - use grid when you need a rigid structure (e.g. some card archive, say a blog, shop or events)
the way you explain things is great man. as a person who gets distracted by the simpliest things, i can watch your videos without losing my focus for hours. much appreciated.
I am using grid for the outer structure and flex for positioning items in certain layout inside the container. It holiday today in Ethiopia and am still viewing this tutorial because its kev . Thank you
You did a way better explanation of flex vs. grid than my college professors. CSS is so awesome, I enjoy working with it more than any other languages, probably because of my artistic background.
Always wondered why Flex was considered 1D when we could lay it out in a 2D matrix like manner. Your video has clarified and cleared my doubts. Thank you.
Grid template areas are a lifesaver when scaffolding apps in a team environment. It's easy to teach other developers and makes it easy to maintain the layout as you add features.
Flexbox and Grid are two powerful layout systems in CSS, each with its own strengths and use cases. Let's compare them to understand when to use Flexbox and when to use Grid: Flexbox: One-dimensional Layout: Flexbox is designed for one-dimensional layouts, either in rows or columns. It excels at distributing items along a single axis, making it ideal for creating flexible and responsive layouts. Content Ordering: Flexbox allows you to easily change the order of flex items without modifying the HTML structure, which is useful for responsive designs or reordering elements in different screen sizes. Alignment and Justification: Flexbox provides precise control over alignment and justification of flex items along the main axis and cross axis. Complexity: It is relatively easy to understand and implement, making it a good choice for simpler layouts. Grid: Two-dimensional Layout: Grid is designed for two-dimensional layouts, allowing you to create complex grid-based structures with rows and columns. Grid Items Control: It provides fine-grained control over the placement and sizing of grid items. You can define explicit sizes for rows and columns and position items anywhere on the grid. Responsive Layouts: Grid excels at creating responsive layouts where elements reflow based on available space, providing a powerful solution for complex responsive designs. Alignment and Spacing: Grid offers powerful alignment and spacing capabilities along both axes. Complexity: Grid may have a steeper learning curve compared to Flexbox, especially for complex layouts. When to Use Flexbox: For one-dimensional layouts, such as navigation menus, card layouts, or vertically stacked elements. When you need to distribute items along a single axis with flexible sizing. For aligning or justifying items within their container. When to Use Grid: For two-dimensional layouts, like complex grids, magazine-style layouts, or multi-column forms. When you need precise control over the placement and sizing of items in both rows and columns. For creating responsive layouts with automatic reflow and resizing. In many cases, Flexbox and Grid can be used together to create more sophisticated and responsive layouts. It is common to use Flexbox inside Grid cells to further control the alignment and ordering of elements within the grid. In summary, use Flexbox for simpler one-dimensional layouts and flexible content distribution, while Grid is best suited for more complex two-dimensional layouts and fine control over grid items. Understanding both Flexbox and Grid will give you the tools to create versatile and responsive web designs efficiently.
I always used to read about 'learn flex there, learn flex here' when I was learning css and I thought that grid was some outdated feature but it's not. It's good to know, amazing content
Thank you for your help, recently started with HTML and CSS and was stuck for about 2 weeks just trying to get a side panel to be 100% height and was having problems with one page it was full height another it was half height. Changed to using grid instead of flex, and it worked straight away.
Kevin, thank you for showing each of these as you did. I believe I now have a much better understanding of what each is good for in a way I never have & I've tried. Thank you!
Thanks man. I've been a webdev ~15 years ago, when we got to fight with IE6, and recently gettign back into it. Your content is super helpful to get back up to speed.
This video came to me exactly while i was struggling to learn the differences between flexbox and grid, and explained that everything so clearly. Thank you for this amazing content.
I recently got back into this as I was working with a WordPress theme and now realize how in some cases flex is easy to use. One area would be a website header with the logo, menu and maybe social icons all aligned in a neat with with just few lines of code.
Really great content! Coming from software then backend, all too often i have felt like CSS is a nightmare. In only 20min you just gave me the explanations i needed to fix my layout (i switched from grid to flex) and now it looks great and it is responsive. Keep doing what you do. Big thanksss!
I’m so glad I watched this. I’ve been trying to figure out a problem on a site where a list of logos wasn’t working as I expected. Finally got it to work thanks to the mention of grid children and a flex/grid combo.
I've watched quite a few videos on flex grid trying to understand were and how to use them. i can truthfully say with out any doubt that this was by far the easiest and best video of the topic for many reasons. I could have also gone to a bootcamp and payed a few $$$$ for this same information. But i highly doubt that it would have been as effective to get to explain the topic as well as this video.
Thanks for the comparison of both. This will help me in future! I tend to forget how / which layout I should use due to not regulary using it. What me personally drives me crazy is the flex-direction. There I always think the opposite.
Flexbox with flex-wrap: wrap and justify-content: center for laying out a collection of items where you don't know how many there are and don't want one or two at the start or end of the last row
Great video, Kevin. I like the benchmark of asking what determines the column widths: items or parent. That's a helpful way to conceptualize when to choose either. Bravo 👏
Use grid if you want the parent to specify the columns and rows and use flex if you want the chrildren to do it. I find grid a lot easier to work with and it's a real godsend that saved a lot of time for me. Flex and flex-wrap however are still really nice if you want floating behavior with added features like justify: center, and without all the clearfix hassle.
This is a great summery of flex and grid. I used alredy Booth. But never felt comfortable with it. this video is realy helpful to understand this two systems
I started with flex as a beginner (I’m still) and tried to learn grid. I find it way more intuitive and easier to use overall. Just my newbie opinion 🤷♂️.
Woow really thank you for explaining everything. I struggle with layout and I started to learn the basics and this really helped me to understand it much more!
I've been using flex for years and love it, but I recently needed a way to layer a container above another container without using z-index and position properties, grid worked phenomenally with being able to tell 2 containers to be on the same row and column. I will admit that it's a bit more complex than flex, but I'm slowly comprehending it the more I use it, as with anything in life.
Flexbox is better for objects with irregular sizes that need to be accomodated by building the layout around them. While grid on it's default works at it's best when the objects are similar to each other, making them easily fit in the simple layout instead of the opposite. Ofc both of these can be changed with properties but on their most primitive state they tend to work like this.
Thanks for this, it's just what the doctor ordered! I'm holding a web developer position now for a Financial Technology company and doing a lot of research and practice with CSS and JavaScript. I was looking to spice up my skills on Flex and Grid, I will be watching your other videos on them too!
Need to keep in mind that grid is new. I made one report table like page, but then realized that one function is supported only in Firefox, and then i had to rewrite it to support chrome too. However, grid is fantastic feature, it adds insane adaptivity to webpages. flex is good for 1D, grid is for 2D lol. grid is more pleasant for 2D lol
First of all : you really remind me of Ted Mosby from How i met your mother :D Your tutorials are really helpful so far for me! Im a backend developer and trying to get more into frontend and it can be really frustrating with css. But like everything in programming it takes time, the only thing i can tell anyone who is starting with programming practice is the key of everything :)
I normally use grid for site layout and flexbox for UI layout but there are always situations where one is just better to use for whatever reason. You can easily learn both on a weekend.
For me (and I'm not familiar with all the properties of grid) the question is how does each display mode respond to changing screen size. With flex things wrap fairly readably using auto widths even if the font size changes. With grid you have a nice layout but only for a range of screen size - the one grid layout won't be usable for *all* screen sizes. A media query has to be used to change the grid layout when content is too big or too small. So more @media code is the price for using grid, despite its greater potential in 2D layouts.
We can use two this amazing things , let's say that in header we can use possibly flex .But in the table of blocks we can use Grid , and also we can practically don't use adaptive if we make adaptive markup .
I don't understand why people always confuse these two properties. They look different. I use flexbox when I need to get a table of tiles of the same size, and automatically wrap items if there isn't enough space. The grid is used for components where I want the elements to be aligned both vertically and horizontally. This can't be done with flexbox alone if you have a dynamic number of rows or columns. The grid also works well for the entire page layout. The so-called tabular layout. On flexbox, doing the same is much more difficult.
Use grids if you want a nice, organized structure, like a gallery or list of services. Use flexbox when you want a bit more control over spacing, alignment, or want a layout that changes naturally based on screen size.
Thank you for the high quality content, Kevin! Curious, what do you use for recording your videos? I love how your headshot view adjusts in the screen to make more of the screen visible!
I don’t know how or where I stumbled upon your channel but I love it. I’ve watched a few of your shorts as well and everything is always explained clearly without “showboating” jargon that isn’t necessary. I’m at grid in my learning currently so finding this video is perfectly timed!
I just watched you’re old video about this topic form 2019 and thought: “It would be nice if you posted an updated version”. What the heck man, your read my mind 😂
I was learning HTML when the very first version of CSS was proposed and never really did much with it. Having been introduced now through your videos to these concepts it is so intriguing. Doing this with a table in the early 90ś wouldǘe been impossible of course. Iḿ loving doing design again, thank you.
This is really helpful, I'm just getting started and I am struggling with the CSS portion. I know in my head how I want it to look, I just don't know how to get it there.
I pretty much just use grid with grid-template-columns (and/or rows and/or areas) for just about everything. To me, Flexbox just works weird, and grid works more naturally for me.
To be honest, I rarely use Flexbox anymore. It's useful for when you don't care about the size of the content other than to fill up things, and for centering things (although Grid works wonders for this too). You can often get away with much less markup and CSS when using Grid. Flexbox will be more useful going forward however now that browsers support gap in Flex contexts as well.
In short, flexbox is flexible and easy to add, but its frustrating as hell to use if you need boxes to be in places where you think it should be. I end up doing grids for more exacting work where I need things in specific spots on the layout and sometimes even use sub-grids instead of flexbox for more complex layouts within a grid. Flexbox is used only in places where I absolutely don't care about the position as long as its there roughly where I need it.
I did some performance tests long long time ago and flex is way faster then grid. I ones said use grid for your layout stuff and flex for your components stuff. And I still believe that's true..
If we want a FLEXIBLE layout (the layout adapts to fit the content), we use flex.
If we want a more fixed layout (the content adapts to fit the layout), we use grid.
and if we don't know which one it will be ? ^^ do both ^^ ?
If I can picture the grid I use grid. If I can't I just use flex cuz it's easier.
But isnt grid also flexible if you use minmax?
@@revi925 that's more for adapting a fixed grid to any screen size than having it be flexible to any content, though sometimes it works for either
nah fam absolute positioning for everything masterrace
As a mostly backend developer, every time I have to use CSS, it feels like I'm starting over. Your videos are my go-to resource to refresh and add to my CSS understanding.
Thanks so much!
As an inspiring backend developer, please can you refer me on the material that will guide me becoming a backend?
@@userhenrolwest
Hey!
the inspiring backend developer hasn't replied yet. Are you still waiting or have you started working on something, Henrol West?
if you are curious, how I know you're from India? Typically, only people from India ask questions in that manner.
@@27sosite73 I'm still waiting.
Feel your pain. For me it feels like the Frameworks or styles or technologies change every time I look away.
This is probably the best summary of Flex vs Grid, the pros and cons and how they can work together. Great job!
My rule: if I can't achieve it easily with flex, I'll pivot to grid. Flex is the go-to choice. But I have to admit that I have less experience with grid than with flex, so that definitely plays a role in the decision. And simply by the amount of choices you have, you can conclude that grid is quite a bit more complex.
same, i had tried grid once
it was so traumatic, I never did it again
grid-template-areas gives great results. Grid really isn’t too bad.
grid is actually op
@@HarshRajAlwaysfree 😁😂
Grid feels like JS not CSS. It's poorly implemented and doesn't belong in the language, but no going back now. Basically grid was their prototype at trying to get away from floats, then with flex they actually did it right.
You have made quite a few videos recently on flexbox and grid but I find the repetition enormously helpful. The basic principles are getting hammered in and I find I can now use them much more confidently. Keep on going and thank you!
Thank you so much! The live demonstration of the differences between them is awesome!
Thank you!
I tend to use grid for overall layout of the web page or for larger components.
While Flexbox often helps me with Individual components, basically I use it on the smaller scale.
yes
I do the same, except grid for the overall page design and if there is one grid where there is a complex layout (ie: a main page), I would use flexbox... NOT! I use a sub-grid instead. Flexbox is strictly for when I don't care about position exactly. I spent way too much time on flexbox to find out it still doesn't do what I want as the screen size changes.
exactly.
I do exactly the same thing.
This is the old adage, but it isn't how you should look at Grid in my opinion. I use Grid within button elements and all sorts of tiny things.
Amazing demonstration! Kevin is the undisputed MVP!
These clicked for me:
- in flexbox each row/column is independent of the others
- use flexbox when intrinsic sizes are important or useful
- use grid when you need a rigid structure (e.g. some card archive, say a blog, shop or events)
the way you explain things is great man. as a person who gets distracted by the simpliest things, i can watch your videos without losing my focus for hours. much appreciated.
I am using grid for the outer structure and flex for positioning items in certain layout inside the container. It holiday today in Ethiopia and am still viewing this tutorial because its kev . Thank you
I prefer to use grid for the whole page layout, while flex for smaller scale things as you showed in the last example.
This is the way
This is the way
Like a bantha. I have spoken
Same. This is the way.
Thank god, i am not alone😄
You did a way better explanation of flex vs. grid than my college professors. CSS is so awesome, I enjoy working with it more than any other languages, probably because of my artistic background.
I'm binge-watching your videos to teach myself CSS during my 30-min breaks at work. Thanks a ton.
You sir, are a real hero. Making these kind of videos for totally free is an honorable work!
Always wondered why Flex was considered 1D when we could lay it out in a 2D matrix like manner. Your video has clarified and cleared my doubts. Thank you.
Grid template areas are a lifesaver when scaffolding apps in a team environment. It's easy to teach other developers and makes it easy to maintain the layout as you add features.
Flexbox and Grid are two powerful layout systems in CSS, each with its own strengths and use cases. Let's compare them to understand when to use Flexbox and when to use Grid:
Flexbox:
One-dimensional Layout: Flexbox is designed for one-dimensional layouts, either in rows or columns. It excels at distributing items along a single axis, making it ideal for creating flexible and responsive layouts.
Content Ordering: Flexbox allows you to easily change the order of flex items without modifying the HTML structure, which is useful for responsive designs or reordering elements in different screen sizes.
Alignment and Justification: Flexbox provides precise control over alignment and justification of flex items along the main axis and cross axis.
Complexity: It is relatively easy to understand and implement, making it a good choice for simpler layouts.
Grid:
Two-dimensional Layout: Grid is designed for two-dimensional layouts, allowing you to create complex grid-based structures with rows and columns.
Grid Items Control: It provides fine-grained control over the placement and sizing of grid items. You can define explicit sizes for rows and columns and position items anywhere on the grid.
Responsive Layouts: Grid excels at creating responsive layouts where elements reflow based on available space, providing a powerful solution for complex responsive designs.
Alignment and Spacing: Grid offers powerful alignment and spacing capabilities along both axes.
Complexity: Grid may have a steeper learning curve compared to Flexbox, especially for complex layouts.
When to Use Flexbox:
For one-dimensional layouts, such as navigation menus, card layouts, or vertically stacked elements.
When you need to distribute items along a single axis with flexible sizing.
For aligning or justifying items within their container.
When to Use Grid:
For two-dimensional layouts, like complex grids, magazine-style layouts, or multi-column forms.
When you need precise control over the placement and sizing of items in both rows and columns.
For creating responsive layouts with automatic reflow and resizing.
In many cases, Flexbox and Grid can be used together to create more sophisticated and responsive layouts. It is common to use Flexbox inside Grid cells to further control the alignment and ordering of elements within the grid.
In summary, use Flexbox for simpler one-dimensional layouts and flexible content distribution, while Grid is best suited for more complex two-dimensional layouts and fine control over grid items. Understanding both Flexbox and Grid will give you the tools to create versatile and responsive web designs efficiently.
I always used to read about 'learn flex there, learn flex here' when I was learning css and I thought that grid was some outdated feature but it's not. It's good to know, amazing content
Thank you for your help, recently started with HTML and CSS and was stuck for about 2 weeks just trying to get a side panel to be 100% height and was having problems with one page it was full height another it was half height. Changed to using grid instead of flex, and it worked straight away.
Kevin, thank you for showing each of these as you did. I believe I now have a much better understanding of what each is good for in a way I never have & I've tried. Thank you!
Danke!
Thank you so much!
Thanks man. I've been a webdev ~15 years ago, when we got to fight with IE6, and recently gettign back into it. Your content is super helpful to get back up to speed.
And nowadays we fight with IE11. How the world has changed.
@@jtinz74 It's nowhere near as bad as it used to be.
This video came to me exactly while i was struggling to learn the differences between flexbox and grid, and explained that everything so clearly. Thank you for this amazing content.
I recently got back into this as I was working with a WordPress theme and now realize how in some cases flex is easy to use. One area would be a website header with the logo, menu and maybe social icons all aligned in a neat with with just few lines of code.
Really great content! Coming from software then backend, all too often i have felt like CSS is a nightmare. In only 20min you just gave me the explanations i needed to fix my layout (i switched from grid to flex) and now it looks great and it is responsive. Keep doing what you do. Big thanksss!
I’m so glad I watched this. I’ve been trying to figure out a problem on a site where a list of logos wasn’t working as I expected. Finally got it to work thanks to the mention of grid children and a flex/grid combo.
This is the most useful video about CSS I've ever watched! Thank you so much, Kevin :D
I've watched quite a few videos on flex grid trying to understand were and how to use them. i can truthfully say with out any doubt that this was by far the easiest and best video of the topic for many reasons.
I could have also gone to a bootcamp and payed a few $$$$ for this same information. But i highly doubt that it would have been as effective to get to explain the topic as well as this video.
Obviously floats are the best layout tool
Dem be fightin' wordz!
floats?
Bro they aint supported in IE, better stick with inline and blocks
@@marcelijankowski9593 🤣🤣🤣🤣🤣🤣
Obviously you are from the future. How did you leave a comment the day before the video came out?
@@jscode6330 patron, but he is from the future
It's crazy how it's highly unlikely that I would have known any of this if I hadn't found this video. Thanks, Kevin.
Thanks for the comparison of both. This will help me in future! I tend to forget how / which layout I should use due to not regulary using it.
What me personally drives me crazy is the flex-direction. There I always think the opposite.
Thanks!
Thank you so much (and sorry for missing this until now!)
It's not very often I find one simple, concise video that answers the exact questions I have. Thank you!
Flexbox with flex-wrap: wrap and justify-content: center for laying out a collection of items where you don't know how many there are and don't want one or two at the start or end of the last row
Great video, Kevin. I like the benchmark of asking what determines the column widths: items or parent. That's a helpful way to conceptualize when to choose either. Bravo 👏
Thank you very much Kevin, you made me to fall in love with CSS, by simplifying some concept which are hard to understand
If you also want to fall in love with the CSS Framework "Tailwind CSS": I will post a video about it next week on my channel ... 😉
Can't thank you enough for this. It's one of the best explanations who's struggling to understand that.
Use grid if you want the parent to specify the columns and rows and use flex if you want the chrildren to do it.
I find grid a lot easier to work with and it's a real godsend that saved a lot of time for me. Flex and flex-wrap however are still really nice if you want floating behavior with added features like justify: center, and without all the clearfix hassle.
clarified quite a lot for me, thanks my men, definitely will subscribe
I have learned a lot you. My deeper understanding of css is due to you.
I am comfortable using vanilla css than any css framework.
Grateful to you.
This is a great summery of flex and grid. I used alredy Booth. But never felt comfortable with it. this video is realy helpful to understand this two systems
Thank you so much. Your videos have been a blessing to helping me start off and helping my fathers business grow.
I started with flex as a beginner (I’m still) and tried to learn grid. I find it way more intuitive and easier to use overall. Just my newbie opinion 🤷♂️.
Exactly grid is just simpler to pick up and starting building with.
I totally agree
Woow really thank you for explaining everything. I struggle with layout and I started to learn the basics and this really helped me to understand it much more!
I've been using flex for years and love it, but I recently needed a way to layer a container above another container without using z-index and position properties, grid worked phenomenally with being able to tell 2 containers to be on the same row and column.
I will admit that it's a bit more complex than flex, but I'm slowly comprehending it the more I use it, as with anything in life.
Flex : asks children their size, tells their location
Grid : tells children their size and location both
Flex for lists
Grid for tables
kevin's videos quality out league every other content creator. He explains every detail of the subject so smooth and clear.
Flexbox is better for objects with irregular sizes that need to be accomodated by building the layout around them. While grid on it's default works at it's best when the objects are similar to each other, making them easily fit in the simple layout instead of the opposite. Ofc both of these can be changed with properties but on their most primitive state they tend to work like this.
the best material about Grid and Flexbox I have evere found. Thanks!
Thank you so much for these videos. This is the first time I've explored using flex for something, so this is invaluable.
Thanks for this, you convinced me to start using more grid display instead of going for flexbox as my default option!
Thanks for this, it's just what the doctor ordered! I'm holding a web developer position now for a Financial Technology company and doing a lot of research and practice with CSS and JavaScript. I was looking to spice up my skills on Flex and Grid, I will be watching your other videos on them too!
Need to keep in mind that grid is new.
I made one report table like page, but then realized that one function is supported only in Firefox, and then i had to rewrite it to support chrome too.
However, grid is fantastic feature, it adds insane adaptivity to webpages. flex is good for 1D, grid is for 2D lol. grid is more pleasant for 2D lol
Kevin, really thank you, you are such a magnificent teacher! All the best!
First of all : you really remind me of Ted Mosby from How i met your mother :D Your tutorials are really helpful so far for me! Im a backend developer and trying to get more into frontend and it can be really frustrating with css. But like everything in programming it takes time, the only thing i can tell anyone who is starting with programming practice is the key of everything :)
It's interesting you say that grid is easier to learn than flexbox. I found the opposite was true. This was a great breakdown.
Thanks, simplified illustration, yet thoroughly grasped the concept better now...
your videos are so smooth and chill
You explain so well man, this is great!
I normally use grid for site layout and flexbox for UI layout but there are always situations where one is just better to use for whatever reason. You can easily learn both on a weekend.
For me (and I'm not familiar with all the properties of grid) the question is how does each display mode respond to changing screen size. With flex things wrap fairly readably using auto widths even if the font size changes. With grid you have a nice layout but only for a range of screen size - the one grid layout won't be usable for *all* screen sizes. A media query has to be used to change the grid layout when content is too big or too small. So more @media code is the price for using grid, despite its greater potential in 2D layouts.
Exactly, I would be happy to have this specific topic in the video…
I was researching flexbox and came across this. It’s really great to know that grid is available
i just love your videos man, so helpful! keep up this awesome work of yours! thanks :)
We can use two this amazing things , let's say that in header we can use possibly flex .But in the table of blocks we can use Grid , and also we can practically don't use adaptive if we make adaptive markup .
thank you so much on the explanation i was wondering what the heck is grid and now i know i can rely on both i was fighting with flex so much
Love the way you teach, bro! Thank you!
I don't understand why people always confuse these two properties. They look different. I use flexbox when I need to get a table of tiles of the same size, and automatically wrap items if there isn't enough space. The grid is used for components where I want the elements to be aligned both vertically and horizontally. This can't be done with flexbox alone if you have a dynamic number of rows or columns. The grid also works well for the entire page layout. The so-called tabular layout. On flexbox, doing the same is much more difficult.
Absolutely great explanation of flex and grid. Loved it! :)
Excellent visualization and explanation. You're like the Adam Ragusea of programming :D
Use grids if you want a nice, organized structure, like a gallery or list of services.
Use flexbox when you want a bit more control over spacing, alignment, or want a layout that changes naturally based on screen size.
Thank you for the high quality content, Kevin!
Curious, what do you use for recording your videos? I love how your headshot view adjusts in the screen to make more of the screen visible!
Intrinsic sizing vs extrinsic! Love it!
So a grid is griddy and flex is flexy :p
On a serious note, this is a great video that explains the differences really well. Amazing
Fantastic video. Love the "focus on intrinsic sizing" approach.
I don’t know how or where I stumbled upon your channel but I love it. I’ve watched a few of your shorts as well and everything is always explained clearly without “showboating” jargon that isn’t necessary. I’m at grid in my learning currently so finding this video is perfectly timed!
Thank you! It really helps me to have a better understanding about this topic.
I just watched you’re old video about this topic form 2019 and thought: “It would be nice if you posted an updated version”.
What the heck man, your read my mind 😂
freaking really good video my guy!
exactly what i was looking for. Thank you!
I was learning HTML when the very first version of CSS was proposed and never really did much with it. Having been introduced now through your videos to these concepts it is so intriguing. Doing this with a table in the early 90ś wouldǘe been impossible of course. Iḿ loving doing design again, thank you.
This is really helpful, I'm just getting started and I am struggling with the CSS portion. I know in my head how I want it to look, I just don't know how to get it there.
whenever you speak about css, it's sounds like a beautiful story. totally loved the video 😍
Fantastic video with very clear examples . I finally understand the differences. You are awesome. Thank you so much 😊
display: inline-block; works also fine for nav and tags if you don’t need extra fine tuning.
I pretty much just use grid with grid-template-columns (and/or rows and/or areas) for just about everything.
To me, Flexbox just works weird, and grid works more naturally for me.
Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.
Incredibly well explained!
thank you so much! I'm studying my diploma in web development and Im designing a website with HTML/CSS for an assignment , so this helps a lot!!
That was an awesome tutorial! I love the energy you bring to helping me learn these concepts. Thanks so much!
Wow, I love your content, man! That's awesome 😮
Wow ! Thank you Kevin :)
This video is great. It's so well explained. You really helped me understand the differences between Grid and Flexbox.
YOOO everytime I'm starting on a project for college wondering what i could use the css king himself comes on my subscription with answers!
Thank you!! I really needed this explanation.
To be honest, I rarely use Flexbox anymore. It's useful for when you don't care about the size of the content other than to fill up things, and for centering things (although Grid works wonders for this too). You can often get away with much less markup and CSS when using Grid.
Flexbox will be more useful going forward however now that browsers support gap in Flex contexts as well.
Great video, thanks. This is the first time I am seeing your channel. Something about you reminds me of Fox Mulder, but I'm now subscribed.
Quite nice perspective. My scss file can often get bloated and hard to read. By switching my grid, it can help me centralize style and easier to read.
Another great video sensei. I use Flex for menus and Grid for everything else. A perfect marriage.
In short, flexbox is flexible and easy to add, but its frustrating as hell to use if you need boxes to be in places where you think it should be. I end up doing grids for more exacting work where I need things in specific spots on the layout and sometimes even use sub-grids instead of flexbox for more complex layouts within a grid. Flexbox is used only in places where I absolutely don't care about the position as long as its there roughly where I need it.
I did some performance tests long long time ago and flex is way faster then grid. I ones said use grid for your layout stuff and flex for your components stuff. And I still believe that's true..
Woww got different perspective for the flex-box with its intrinsic property !! thankss