CSS Grid vs Flexbox

welcome to this video CSS grid or flexbox which one should you use now in case you need to learn CSS Craig first I got a full course on CSS which converts way more than just a grid but all the grid quite extensively I'll link to it with a huge discount can be found in the video description in this video I won't dive into what the grid is but I'll answer this simple question which one should you use with the two grid or flex box can you use them together and if yes how let's have a look so CSS grid where is this flexbox in this video I'll also show you both in a practical example without diving too deep into it though but let's first get the theory out of the way the CSS grid is a feature a relatively new feature of the CSS specification that allows you to basically position elements in you guessed it a grid so to layout items as a grid on your page flex box on the other hand is for laying out a single row or column of elements so CSS grid is about cute dinah mention all positioning we got rows and we got columns whereas flexbox is about one dimensional positioning we got either a row or a column now you can actually set up flex box to wrap its item into a new line so if you got let's say I'm set up in a row and they exceed the space of their container you can configure flex box such that it automatically wraps the items and starts a new line but it's still one-dimensional it doesn't think of rows and columns it's still a row of items and it just happens to run out of space and hence starts a new line this is really important to understand with the grid you really define a layout which contains of rows and items and which therefore looks the way you want it to look now let's have a look at this in a real example and there we'll also see how we can actually use both together because they actually do work together very well as you will see now here's a well visually okay web page which does not have any functions other than that it's awesome to show you how grid and flex box work together and what their differences are we got a header the purple thing we got a sidebar the orange box we got the main content the white one and the footer the black thing at the bottom here now clearly as you can tell it's not really a sidebar hands-on it's all stacked on top of each other now this is exactly where the grid can help us if we want to position the things such as I just described them which means the sidebar should sit next to the main content for example the grit can help us with that so if we go to our code and quickly jump into the HTML code we can see we've got header we got our aside element for the side menu we got the main element at the footer and all its nested in the body now we can turn the body into a grid by setting its display property to grid and again if you need to learn more about the grid check out some dedicated tutorials or for example my entire CSS course to which you can also find a link in the video description so we got this set to a grid now and if we now reload the page nothing changes which actually is a default by default the great CSS grid starts creating rows automatically and adds the content in these rows which is why the layout didn't change however we can now change this by now adding grid template columns here we need two columns in our case one for the sidebar and one for the main area so let's say the sidebar should occupy 30% and the main area 70 percent or just Auto to automatically fill the remaining space then we would add two columns like this one column with 31 column with the rest now we also want to have some rows and we could also rely on the automatically create rows capabilities of the CSS grid but here we can also define them explicitly with grid template rows and we can say the first row is our header so maybe we want to give this a height of 60 pixels so for the header for rows this is a height for columns the value we enter here refers to the width so here we got 60% 60 pixels height for the first row which will actually be our header later then we can also set up a height for our main area and a sidebar I actually want to calculate this automatically though so I will set it to auto because I want to give the footer a height of also let's say 60 pixels with this if we save that and we now reload it's totally broken because right now what happens is that it basically fills our four elements header main sidebar and our footer into the cells we created and we created four cells because we got two columns we created six cells we got two columns and 3 rows and it starts well occupying populating these cells now we can override this with a third property we add to the body great template areas which has a rather strange looking syntax but where we simply give each cell a name and therefore we can create so-called areas for example I know that the first two cells which are the two cells in the topmost row should be populated by the header so I'll name them HD or header whatever you like HD like this so separated with a white space in a string this refers to the first row the first value then refers to the first column in that row so to the first cell and the second value refers to the second column in that first row now we got more rows we got free so I'll simply add another string you don't have to put it into a new line but it's easier to read and here the first column should actually be populated by the sidebar side menu so I'll name this sidebar the second colors or the right one should be populated by the main area so I'll name this main the names are totally up to you though and then the last row there I want to have my footer in both well cells and you don't need to name these areas as the HTML elements for example for the header I used a different name now we gave our areas names we can now assign them for dead we go to the header for example and there we can add the grid area property and now enter a name which we defined in grid template areas for example or in this case not example HD without quotation marks though so grid area HD will now ensure that the header goes into both these cells so that it spans both cells for deicide I'll add grid area and set it to sidebar furring - this cell here for the main area which I haven't added yet so let's add it I'll set this to main and for the footer all the with grid area I'll set this to fuller now if we save this and we reload we're using the CSS script so that we all of a sudden have to layout we want and this shows us the power of the grid since we think in columns and rows we can perfectly transfer our idea of the web page into a layout it would be much harder to achieve this with other means though it's of course possible we've built pages like this for ages and the grid is relatively new but this is truly powerful as you can tell now what we can see however is that our items in the header and in the footer are not positioned in a nice way this is where we now can beautifully add flexbox as I showed you on the slide flexbox is about positioning elements in a one dimensional area so in a row or in a column we're not thinking about rows and columns and this is exactly what we have here in the header i want to position the next huge hour so in a row three items in a row there's no column well there are three columns i guess but we don't need to define them i'm just adjust what you tell CSS please put these three items into a row and automatically position them next to each other as I instruct you and the same for the footer I want to position these two next to each other let's say of course you could change this but here I want to put them next to each other we can actually use the grid for this too but it's a bit overkill but we can beautifully and perfectly use flexbox so let's go to the header to be precise if we inspect the header we want to add flexbox to the navigation list which holds our separate navigation items so we go to the navigation list class here and we add display flex by default this positions them in a row we can set this with Flex Direction row more about flex boxes all the taught and of course I mentioned as well as in a YouTube video by Manuel my colleague on this channel now we got flex box setup and now if we save this and reload we can already see that they're sitting next to each other now both in the header and the footer because the navigation list class is actually used in both places in our HTML code obviously it's not positioned in the middle anymore but due to flex box we can really just say justify content and put this to center now this will ensure that on our main axis which for a flex direction of Rho goes from left to right they are positioned in the center and you also Center them vertically we can also say or add a line items Center here this positions them on the cross axis which is just the opposite of the main axis so in this case vertically so now this will Center in vertically for this to work however I need to add a height of 100% to navigation list so that it takes the full available space to header it gives it with that if we now reload you see it's centered now they're sitting very close to each other we could change this with a simple margin on the navigation items though or alternatively we get that Flex container with center the container and use a value like space between for example here for justified content so this will be an alternative we could give this a width of some pixels margin Auto and change just a change justified content but easier than that is just using navigation item and giving it a margin of zero top and bottom but 10 pixels left and right let's say if we do that and we reload now we got some spacing in between and here we are using flexbox because it's easier it has better browser support and it's absolutely what flexbox is built for so a common misconception is that you use either of the two grid or flex box the reality is you should use both combined with each other true you can find ways to achieve something you do with the grid with Flex box and the other way around but if you use the strengths of both concepts you get a way better result as you can tell so I hope this video could help you with diving integrative you didn't do that already and understanding when you should use which hopefully see you in our videos too but

Channel: Academind

Views: 193,261

Keywords: css grid, grid, flexbox, css flexbox, css grid vs flexbox, grid vs flexbox, flexbox vs grid, flexbox vs css grid, css tutorial, css grid tutorial, css flexbox tutorial

Id: RSIclWvNTdQ

Length: 11min 42sec (702 seconds)

Published: Thu Mar 22 2018