Hello, everyone, and welcome back.
In today's review, we will learn how to use a responsive grabe using your flex.
And as you can see on the screen, I've got this great for the laptop screens.
It has four cards in one drawer.
When I reduce the size, the margin goes away.
And after that, the guards did start to reduce in size.
They reduce until they reach a minimum red.
And after that, the guard is sent to the next room.
And we only have to go to room now.
Again, when I tried to reduce this red, because the guards are already, at a minimum, good.
So they just move in the next line.
And on the more wider screens, we've got two guards.
So let's try creating this responsive grid, using flex spots.
And as you can see, we've already got these cards here.
So let's bring up our go to the do.
Let's bring it up, shall?
All right, so just start the textbooks first, we need a container.
So as I can see here, the section drops all the articles.
So this can be given, this clearly reflects so coming down here.
Let's say a section on display flipped the table.
And as you can see, all the items are in one robot.
The flexes is overflowing.
So for that, we can do Flex Rock.
Let's go to rally, Rob.
And as you can see, they've got this group.
But it's not in the center of the screen, so let's do that.
So for the arguments and views, justified content town center.
Now, as you can see, the entire grid is in this part of the screen right now.
We have three guards in one room, but we want four.
So coming up to the blog, Cardella, me, too.
In other words, three hundred pixels.
So let's say we want four items so we could do.
Twenty three percent and two percent for the margins.
Left and right.
Let's save it.
Now, as you can see, we've got four guards and wonder if I tried to be size my browser.
The cards are reducing.
But they keep releasing they don't suffer them anymore with because we haven't specified them and mongoloid,
so let us give that as well.
So minimum would say 200 pixels.
Let's save it.
Let's try reducing the size of the boat.
So, as you can see, my guards are getting smaller once they reach just 200 meters.
The guards move to the next line.
Also, if you are just here.
So once you reduce this extra spacing, flows goes away.
So let's try creating that shark.
Let's see why this is happening.
So coming up here in the main section with given.
So as you can see here, they've got padding left and right.
Good pushing.
So let's remove the duck.
Let's make it zero.
And now, as you can see, the guards are pretty big.
And we don't want that.
We want our group to have this spacing on left and right.
So let's give it a marks with, say, twelve hundred pixels.
Let's save it.
And as you can see, that's what a lot of space on the right hand side.
So if we could bring back to the center of the screen.
That should do the trick to degrade something does and do.
We could simply use margin or do so.
Let's give it some margin.
Dorton zero on the left.
Right.
OK.
Save it on.
As you can see, they've got this similar spacing on left and right.
And then introduce it.
My guide to introducing studies, but the spacing goes away.
And once I reach the minimum level, the guards start to reduce in size.
And that's exactly what we wanted to design.
That's all for today, guys.
If there is something that you do not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And.