Coding

CSS Grid vs Flexbox

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