Coding

Stylin’ Around – Building a real Grid with CSS Flexbox – #2

  • 00:00:00 welcome back everybody in our last video
  • 00:00:03 we left when we just finished the basics
  • 00:00:05 of our grid and had this status here
  • 00:00:08 that we had two columns one half of the
  • 00:00:12 container on one third spacing around or
  • 00:00:16 with our space around class and so far
  • 00:00:20 we really got a nice grid and how nice
  • 00:00:22 it is I want to show you by adding some
  • 00:00:25 more rosin and different color sizes so
  • 00:00:31 let's create a new row here let's all
  • 00:00:35 give it gather and mark it and within
  • 00:00:42 I'm going to create a coal coal one of
  • 00:00:46 four with padding and also marked and I
  • 00:00:55 will also create column with column 1 of
  • 00:01:02 3 so really combining those different
  • 00:01:06 sizes doesn't have to be one of 4 and 3
  • 00:01:09 or 4 I can mix up 1 of 4 and 1 of 3
  • 00:01:12 because remember all that changes as the
  • 00:01:15 width of our column will to give this
  • 00:01:18 padding and our mark class so that we
  • 00:01:20 can see it ok and now we get our quarter
  • 00:01:25 sized container here and one third of
  • 00:01:29 the row here and let's another row to it
  • 00:01:34 or another column sorry column we still
  • 00:01:37 got space for say one of four padding
  • 00:01:51 mark ok so now we get this added and my
  • 00:01:58 thing just doesn't look too bad
  • 00:02:02 now let's see just a short check for ad
  • 00:02:06 space around here we see ok no empty
  • 00:02:10 spaces added here
  • 00:02:12 but when we resize our window we can see
  • 00:02:16 endeavours because if we have our window
  • 00:02:18 size this width here
  • 00:02:21 we barely if at all I don't think we
  • 00:02:24 have any empty spaces here so space
  • 00:02:27 around isn't doing anything in this case
  • 00:02:30 and this is because we got 25% of our
  • 00:02:35 wave for this column and for this column
  • 00:02:37 so that's 50% 33.3 for this column so we
  • 00:02:42 are at 83% and now it's a ok so we
  • 00:02:45 should have 60% left over space
  • 00:02:48 well we got our gather here right
  • 00:02:50 together our spacing here we can all
  • 00:02:53 gathers here and as our overall width of
  • 00:02:57 the window isn't very broad these
  • 00:02:59 cutters might well take up the remaining
  • 00:03:01 16.6% of our space and therefore only if
  • 00:03:05 we make it broader we get left over
  • 00:03:09 space which is then divided up between
  • 00:03:12 all yeah free spaces here okay so I know
  • 00:03:19 vice versa if we resize it to very small
  • 00:03:22 it shrinks because by default every
  • 00:03:26 element inside a Flex container is
  • 00:03:29 allowed to shrink so we would have to
  • 00:03:32 prevent this by setting Flex shrink to 0
  • 00:03:35 if we wanted it to overlap to the right
  • 00:03:41 so ok we get our next grid here I'm just
  • 00:03:46 going to add some numbers again but
  • 00:03:50 actually no let's add some text in the
  • 00:03:52 middle some lorem ipsum dummy text now I
  • 00:03:55 can see that all three children are
  • 00:03:57 stretched out vertically and they are
  • 00:04:00 sized equally even though only the
  • 00:04:02 middle one really needs the space so if
  • 00:04:07 we want to change this behavior we have
  • 00:04:12 to add some additional classes that's
  • 00:04:15 what we're going to do now and now we'll
  • 00:04:16 control we will take care about
  • 00:04:18 controlling the vertical spacing so back
  • 00:04:21 to our real stuff we got our space
  • 00:04:24 around Center
  • 00:04:25 and so on classes now to take care about
  • 00:04:28 a vertical positioning I'm going to say
  • 00:04:32 row and first class I want to give it as
  • 00:04:36 vertical start and we need to flex
  • 00:04:41 property for the container the row of
  • 00:04:44 our line items flags start row dot
  • 00:04:51 vertical oops
  • 00:04:54 and will be aligned items flax and now
  • 00:05:03 we also got Center and and stretch which
  • 00:05:10 is the default vertical Center which is
  • 00:05:14 a line items Center Road stretch just so
  • 00:05:23 that you could overwrite it if you
  • 00:05:25 wanted vertical stretch all items
  • 00:05:33 stretch so we as that this is different
  • 00:05:36 we don't have to set that for our row
  • 00:05:40 because yeah it's already happening so
  • 00:05:47 let's say one piece should be at the end
  • 00:05:55 very clan okay so I've now set it to
  • 00:05:59 vertical and honor didn't work at the
  • 00:06:01 beginning and that was because I
  • 00:06:03 actually forgot and I here I just had
  • 00:06:07 oops I just attempts so I now it works
  • 00:06:10 or it was at vertical and yeah I was
  • 00:06:14 missing but now it works we get the left
  • 00:06:20 or the right box aligned to the bottom
  • 00:06:23 of our row and only the middle one
  • 00:06:25 stretches out the whole size that's
  • 00:06:27 logical because it's the one which needs
  • 00:06:30 this science never that row is flexing
  • 00:06:34 it's it's it's increasing in height to
  • 00:06:38 be able to hold this container and
  • 00:06:40 therefore this container takes all of
  • 00:06:41 its height I think that's make sense I
  • 00:06:45 hope so um LSAT vertical start would be
  • 00:06:50 another possibility and if we were to
  • 00:06:55 set it to centre
  • 00:07:03 I should say if we say 32 vertical
  • 00:07:07 Center never everything centered okay so
  • 00:07:12 that's our vertical positioning and now
  • 00:07:17 there's there are really only two more
  • 00:07:20 things I want to add the first thing is
  • 00:07:24 a tiny back fix we have to do as you can
  • 00:07:29 see we get our empty colored glass here
  • 00:07:30 and we really only need one property in
  • 00:07:34 up here and that is we need to set the
  • 00:07:36 box sizing to be border box so that the
  • 00:07:39 padding is actually included in our box
  • 00:07:42 now can the Z that the directly changed
  • 00:07:45 so that we now got our space on the left
  • 00:07:48 and right here – and that bigness
  • 00:07:51 because I explained to you why it could
  • 00:07:55 disappear if we have a very small stream
  • 00:07:58 like soap right but this screen wasn't
  • 00:08:01 actually small enough the reason why we
  • 00:08:04 had no empty spaces here was that not
  • 00:08:07 only the margins from the gutter was
  • 00:08:10 there but but this margin wasn't enough
  • 00:08:13 to take up the 60.6%
  • 00:08:15 we have on leftover space here remember
  • 00:08:17 25 plus 25 plus 4 – 3 point 3 leaves us
  • 00:08:22 16.7% empty space this is not taking up
  • 00:08:27 by the margins but as we didn't set the
  • 00:08:31 box sizing to border box actually
  • 00:08:34 padding of our containers wasn't added
  • 00:08:37 to its width and therefore not only the
  • 00:08:41 margins were part of the remaining space
  • 00:08:44 but also the padding's even though we
  • 00:08:46 couldn't see it
  • 00:08:46 because for our eye the padding is
  • 00:08:49 included on a border or a box or in a
  • 00:08:51 box of the sediment right and that's why
  • 00:08:53 I set the box sizing to border box which
  • 00:08:56 tells us hey you should include pet
  • 00:08:59 bedding in your total width and now the
  • 00:09:02 width of 25% includes petting of 16
  • 00:09:05 pixels and therefore we get leftover
  • 00:09:08 space on African right the last thing is
  • 00:09:12 when I add is another account class we
  • 00:09:15 got
  • 00:09:16 of two to four and so on I want to add
  • 00:09:18 one which is called Coffelt
  • 00:09:20 and all I provide here is the Flex CRO
  • 00:09:23 property and set it to one now if we
  • 00:09:27 were to give this column here does cow
  • 00:09:30 fill class would tell it that it should
  • 00:09:37 thought the remaining space and you can
  • 00:09:40 see this by it will fact that we don't
  • 00:09:42 have our empty spaces on the left and
  • 00:09:44 right so we can totally remove space
  • 00:09:47 around here because there is no empty
  • 00:09:50 space to divide it up but instead this
  • 00:09:55 box here will take all our empty space
  • 00:09:57 if we were to set this to call fill
  • 00:10:01 these two boxes what you write up the
  • 00:10:03 empty space and you've already guessed
  • 00:10:05 it if we set this to Col fill the middle
  • 00:10:10 box will do it now you think okay I'm
  • 00:10:16 all three boxes got a colorful proper
  • 00:10:19 heat of one or Flex grown property of
  • 00:10:23 one now if you watched my flex box with
  • 00:10:26 you you will know that they should
  • 00:10:29 divide it up equally right because
  • 00:10:31 everyone got a flex flow property of one
  • 00:10:34 which means you take a share of one in
  • 00:10:39 proportion to the other boxes of the
  • 00:10:42 remaining spaces and you take one and
  • 00:10:44 you take one so everyone should take
  • 00:10:47 one-third well that's not the case
  • 00:10:49 because the middle one got this text in
  • 00:10:51 it if we were to remove this text now
  • 00:10:58 every box would be of equal size but as
  • 00:11:03 we have two stacks your flex box
  • 00:11:04 recognizes okay this box probably needs
  • 00:11:06 more space because of this text whereas
  • 00:11:08 these boxes only have one character so
  • 00:11:11 this will take up the most space so
  • 00:11:15 let's set it back to one of three now we
  • 00:11:19 got these two divide up the remaining
  • 00:11:22 space between them so now with this grid
  • 00:11:25 we created here you're really able
  • 00:11:28 to create a full working website
  • 00:11:32 obviously you've got a possibility to
  • 00:11:35 add four functionalities to find unit
  • 00:11:37 but this grid will really enable you to
  • 00:11:41 create a dynamic scaling layout I for my
  • 00:11:47 site have to say for my client project I
  • 00:11:50 most of the time start up with my own
  • 00:11:54 code my own with my own layout and I
  • 00:11:56 don't use frameworks like bootstrap
  • 00:12:01 except for when it really has to go very
  • 00:12:03 fast or it's a very standardized job a
  • 00:12:06 very generic website but most of the
  • 00:12:10 time I really wreck it out myself
  • 00:12:12 because you learn a lot more and you're
  • 00:12:15 a lot more flexible and in the end it's
  • 00:12:17 it's less or as your customer or ever
  • 00:12:20 any wizard visitor of your site has to
  • 00:12:23 download mine so you should really
  • 00:12:25 consider this and I'm interested in what
  • 00:12:28 you think about the serious and about
  • 00:12:30 the street and if you got any positive
  • 00:12:33 experience experiences rebuilding it
  • 00:12:36 using it happy to hear from you so have
  • 00:12:39 a nice day bye