Flexbox vs. CSS Grid: Which Should You Use and When?

hey hey welcome to new tuts plus tutorial i'm adi and in today's video we're talking about flexbox versus css grid and which one you should use and when now there has been and still is a lot of chatter on the subject some people say that you should always use flexbox others swear that css grid is like the best thing ever and some people who like pain and suffering and eternal misery claim that css floats are the best thing you can use for layouts because they work in ie6 okay i made up that last one but the point is people take this versus thing a little bit too seriously i mean both css grid and flexbox are great tools and nobody's going to spank you if you use both right so in this tutorial i'm going to give you my opinion on what each one of these is better suited for and when you should use them but first let me ask you this did you ever need a website where you can download all sorts of high quality digital assets with just one subscription well if you have you should check out envato elements because with one subscription you'll have unlimited access to wordpress themes and plugins web and email templates ui kits and more there are millions of digital assets to choose from they have simple commercial licensing and you can cancel anytime subscribe now using the link in the video description all right now back to flexbox versus css grid okay so one dimension two dimensions one axis two axes uh this is what it essentially boils down to flux box is a one-dimensional model while css grid is a two-dimensional model and from the math classes we all know that two is bigger than one and therefore is better right or is it being one-dimensional flexbox will lay out the flex items in one direction the one of the main axis so you have to decide whether you want a row based or a column-based layout you can't really have both and yes i know that flexbox items can wrap on additional rows and columns but that doesn't make it two-dimensional each new row or column is essentially another flex container grid layout on the other hand is a true two-dimensional model because it lets you work on both the horizontal and the vertical axis and you can use these to precisely place grid items into cells defined by rows and columns based on these facts people tend to think that grid layout is best for large scale stuff like the layout of an entire page while flexbox is better for smaller things like for example aligning a piece of text with an icon that's not entirely true and you should actually avoid that kind of thinking because it's just going to limit you and it's going to prevent you from using these tools to their full potential to give you an example i'm going to show you a simple layout that you would normally build with fluxbox but we're gonna build it with grid instead i'm in codepen and i'm gonna start with a div class container inside i'm gonna create basically three cells one two three now when it comes to the css i'm gonna target the container and i'm gonna add some padding this is purely for um visual styling and i'm going to do the same thing for the cell add a background color and a padding as well just so you can see these cells a little bit better now let's build this layout with grid so i'm going to create a class of grid and i'm actually going to add it to my container like so and inside i'm going to set the display to grid and i'm going to say grid template columns 1fr 1fr 1fr and let's also add a grid gap of one rem right so that's your layout we have three equal columns and you can easily do this with flexbox right in fact this is the typical example of what you would use flexbox for but the thing is it's much easier to deal with grid because i can now like change the size of this middle cell to take up twice as much space as the other columns i can even make it take three times as much space as the other columns right so it's super simple with grid and the syntax is very elegant if we were to do this with flexbox we would do the following let's create a flex class we'll set the display to flex and let's also use the gap property for flexbox one ram and let's change the class here from grid to flex so now we're getting our three columns but they are not taking up as much space as we want we can easily do that by saying flex and we'll target the immediate sorry cells and we can set the flux grow property to one that means each flex item will take up as much space as possible and because we have three cells or three flex items they're going to take up equal amounts of space if we want this middle one to take up twice as much space as the others just like we did with grid we can do that as well we can say flex cell and we can target and child two so the second flux items and we can say flux grow two and it's going to give us the exact same effect now this is the amount of code that we wrote for flexbox to achieve this layout and this is the amount of code that we wrote with grid so as you can see even though this would be a typical use case for flexbox we can do the same thing with grid and we can even do it better because the syntax is much simpler similarly there are layouts for which you would typically use css grid for example a grid system right we all know the traditional 12 column grid you can use to place your items in any configuration you want well normally css grid layout would be perfect for this however there are css frameworks like bootstrap that use a grid system like this built with flexbox so i guess my point is the scale of your project doesn't matter that much fluxbox and grid are both good at doing various things and you don't have to choose one over the other in fact there are plenty of situations where you can use both at the same time for example this is a card ui created for a tutorial by our fearless web design editor ian yates in this demo he uses both css grid and flexbox to achieve this layout and it works beautifully you'll find a link to the full tutorial down below and i highly recommend you check it out now when deciding which tool you want to use you must also consider the desired behavior meaning do you want to let your content shape your layout in that case use flexbox or do you want to let your layout shape your content in that case use grid so let me show you an example for both situations first is an example for using flexbox i have a container with five cells inside and the first cell has a pretty long text now when using flexbox i'm gonna do the following container let's quickly add some padding and just so you can see these cells a little bit better i'm going to add a background color and a padding so back to the container we're going to set this plate of flex we're going to set the flex wrap to wrap so we get new lines and we'll also set a gap to one ram so watch what happens here our layout is basically defined by our content okay we now have one large cell on the first row and the remaining cells are being wrapped on the next row and actually forgot to add four and five here okay so this is a typical example of letting your content shape your layout in which case if you want to do that use flexbox now i'm going to create a new pen here and i'm going to use the same html but the css will be slightly different the only common thing between the two is the css for the cell so actually i'm going to remove these now if we want to let our layout shape the content we're going to use css grid so i'm going to set a display to grid on our container i'm going to add the same one rem gap and i'm going to say grid template columns 1fr 1fr 1fr now we have a different story here right let me quickly kind of match the width of this viewport so you can see the differences this is the layout created with css grid as you can see in this case our layout shapes the content all right so this piece of text is now shaped by the layout by whatever sizes we have set up for our columns in this case when using flexbox the content actually shapes the layout see because we have a very long text the browser just places that text in this column and makes the column full width but in this example the layout is fixed it doesn't adapt to the content instead the content adapts to the layout and the thing with css grid is that you can also use a technique that was introduced by hayden pickering in one of his videos and you'll find a link to that youtube video down below basically this technique allows you to create responsive layouts using css grid and it goes something like this you would say group template columns and instead of defining 1fr 1fr1fr or whatever configuration you want you would say repeat autofill and you would do a min max let's say 20 rams and 1fr so this will basically make those or that layout responsive something that isn't really possible when using this approach this basically tells the browser hey i want three columns regardless of the viewport size this code tells okay i want as many columns and as possible with the minimum width of 20 rams and you just fill in the rest and the browser does that as you can see the larger the viewport the more columns i have the smaller the viewport the fewer columns i have essentially making this layout responsive that's something you can't really do with flexbox right flexbox will just keep on wrapping these cells onto new rows but it doesn't even come close to having this type of behavior so based on these two examples as i was saying you got to decide do you let your content shape the layout then use fluxbox or do you let your layout shape the content in which case you use grid layout now let's not forget about box alignment because one of the big selling points of fluxbox is the ability to align elements very very easily before flexbox we had to resort to all sorts of hacks or tricks to get items to align properly and let's not talk about browser compatibility with those pain suffering ring a bell with flexbox it's now easier than ever to align items pretty much any way we want with minimal cross browser compatible code now the alignment properties from the flexbox specification have been added to a new specification called box alignment level 3. this means they can be used in other specs as well like grid layout and multi-column with that said whenever i need to create a layout that has a very specific alignment or space distribution requirements i always go for flexbox because it's just easier for me to do that even though i know that i have roughly the same options in something like grid now when it comes to browser compatibility we really have no issues with uh with either of these modules for flexbox we have full browser support across the board except maybe older versions of ie but to be honest i don't really care about ie and for grid layout it's roughly the same thing i would say the browser support is a little bit better for a flexbox but the difference is so marginal that it's not even worth mentioning so yeah if you're thinking about differentiating between flexbox and grid layout based on browser support you shouldn't really because both are very well supported in all modern browsers all right folks and that's about it for flexbox versus css grid there are a few more angles to discuss here but i want to keep this short and instead i'm going to refer you to a great article written by anna monas and you can find the link down below with that said thanks very much for watching i'm adi and until next time take care you

Channel: Envato Tuts+

Views: 5,305

Rating: 4.969697 out of 5

Keywords: css grid vs flexbox, css flexbox vs grid, flexbox vs css grid, css grid vs flex box, css grid or flexbox, flexbox vs grid, grid vs flexbox, css grid, flexbox, css, css grid tutorial, css grid layout, grid, css flexbox, web design, web development, css tutorial, responsive web design, grid css, Envato, Envato elements, Envato Tuts+, Tuts+

Id: 18VLSXfsj94

Length: 17min 16sec (1036 seconds)

Published: Sat Jul 17 2021