CSS tutorial with a real life example : a responsive grid with flexbox


hi guys this is Bertrand Rigal and today
I’m gonna show you how to make a responsive grid in CSS with flexbox. This
is one of the exercise I give to my students so here is what it is all about.
We’re gonna change this example, it’s just a column of items into this kind of
responsive grid, there is the example on codepen, so let’s get started
I opened codepen here and I also have the CSS tricks flexbox guide as a
reminder as you may know flexbox works with a relation about container and
items or also parent and children here we have a container and eight children
so we don’t have to change anything about HTML all it’s set we have a
container and outshouted we don’t need anything more so we can start to modify
it various basic example and let’s start
with something nothing new we’re gonna set display flex on our
container it shouldn’t move change anything because they are already
aligned but we need this so container display flex okay it didn’t change anything
but that’s normal here we need to occupy the viewport with vertically aligned
boxes its vertically aligned or we need now it’s to make them bigger like they
are all on the same line but to take as much space as the user can so this
is the element class that we’re gonna target .element set width 100%
it won’t take 100% it is just taking the most space as it can and it does the
strict next although the curtain to wrap and set for
items per line there is one property we need to use it’s of course flex wrap, flex wrap
can be tricky but here we actually need it so of course this is a property for
the parent because it’s on proper resting on the left here is for a parent
and everything on the right here is for the child element container let’s wrap okay good so now we have a problem it
does work but since we put with 100% it stick 100% of the viewport we made four
items the line so what I’m gonna do is to make 100% each item I must have about
25 percent so let’s try this 25 percent of it and it works 25 percent
and we actually have the four items per line it does the tricks let’s go that
was easy so the next step is to actually center
the element and to add some margin to add something nicer to add screen so to
do this we need to center this element this is actually a circle with the
little number inside our leaf element so there are different way to do this
but the more the easier and the easiest is definitely to use flexbox waste
flexbox on the element we’re gonna Center this element very easily so our
container is quite invisible here it’s contained to hate elements that we have
and we’re gonna set each element as also a flexbox container and we can do this
that’s also flex children can become a flex container and that’s what’s cool so
display flex it didn’t change anything just if I can’t enter oh it works
flexwrap just if I content Center and the last one is on line items behind our
Terms Center also oh so easy we said this as a flex container and
justify:center alright same time easy that was
so that was for the margin before the center let’s know works with the margin
look quite easy Maji 10 pixel so it’s breaking
everything everything is now broken and that’s normal because now it’s the width
of each element is 25% plus 10 pixel on the left less than little on the right
though that’s more than 25% we there’s multiple way to do that for example we
can set 24 and can use margin:0 God 5%
yeah it works this will cool there is one Advent kind of advance property that
is more convenient because it allows you to calculate what we need so here we can
use calc 25% – the pixel that we add before and now wouldn’t set the value in
pixel and 25 minus 20 pixel of course because then on the left and on the
right 20 pixel or you can see it also maybe it can walk yeah it does work 2
divided by them Excel and that’s why nice ok there’s a trick
perhaps it’s a bit kind of huge it’s use only 5 perfectly aligned that’s cool I
like that so now we have our grid well it’s quite close to be finished it’s
actually working but we need to use this as a rest until make it responsive like
the same ok so this one it’s gonna be big let’s see we can which can add for
example Lodge here nope here and we should we I think we should do this we
should set a different class for that large weights 100% it’s working that’s
nice let’s add a last one circle mine oh it
does not have any color poor okay oh boy let’s fix that so nine and four inch that’s way better
yeah yeah now 2.2 what if a civilization and add a
brakeman at 1024 pixel oh oh yeah to have a soft which has been here before okay we get it
Oh make a crease add media you can say screen and max wait I fix what’s
happened at this moment how our items are more for online but they’re only two
on mine so dot an immense and now the width it’s no more calculate when T five
percent but it’s now fifty percent fifty to have only two aligned and this it
overrides this one dot watch I should not like that we shouldn’t
leave avoid that look crazy let’s move it at the bottom
of our CSS yeah it’s better I like it much better it does it rate and finally
last break went out 600 pixel so we cannot compete based this one six pixel
and now it’s no more like the 150 but of 100 and yes it works we could set some kind
of hate because it’s not responsive at all eight eight eight eight on Android
view port width my heart it’s nice it’s now perfect just perfect but yeah of
course no it’s perfect now 850 you both ate and now it’s funny
work doesn’t hate we put it roughly boxes kind of big and that’s it we’re
done thank you very much for watching this video I hope you enjoyed it if you
liked it please hit the like button and take a moment and see you next week

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *