Hello and welcome my.
In today's video, we will learn how to modify grid container properties to design responsive letters.
Say we have this list of movie posters.
And what you want to do is convert it into this grid where each group we have five columns, four desktop
screens.
Three columns for tablets.
On Decolonize for mobile screens like this.
All right, so let's get started.
As I mentioned in the previous video, to do me a division grid, we need to use this display grid valley.
So let's start with that.
Let's bring about the issue.
All right.
So this is the debt which tops all the other items, so we'll have to give display grid to this division
coming here.
Also, because that was a maybe so harsh.
Let's see, display grid.
And as you can see, nothing happens.
This property is still browser that day and it's Schulenburg.
Follow now truths and giving a dentist make great changes, nothing by default.
But now they have access to all the great properties, let's say now, and need to define how many columns
each should have for that.
We have this property called Grid Damply columns.
Let's use it.
That's a grid.
Template columns.
So here we can define in the middle of columns.
We are expecting each group.
Let's say we want four bottoms and all these columns should be equal width or in other words, see one
four columns.
I want the entire world to be split equally among these four columns.
So what we can do is we can use a value model.
So this defines split.
All the available space equally amongst the total number of columns that we define you.
So let's take a look at it again and again.
So we specified this one in four times.
So what this means is defined two columns in a row.
Don't give equal with two all.
So let's take it.
Now, as you can see.
But four columns in a row.
Let's start adding some space in between.
So as I mentioned earlier in the boost issue, you have this property called Look Column Gap and great
gap.
So let's try using those.
Let's see.
Great gap, 16 pixels.
So there's just no space of 16 pixels between or rows and columns.
Or we could say rogard, say 32 pixels.
As you can see here, there is a space of 32 pixel between these two rows.
Similarly, let's try and cleansing the column.
Let's say 48, it serves, as you can see, the space between these cards.
It's all these columns is what the apexes.
So let's just bring it back to it since.
Now, what we needed was five items in a room.
So to make that what we can do is simply just add one more order to the table.
And as you can see, we've got five CVT lipsticks, so we could have one more.
And this would give us six columns in each room.
All right.
So let's just bring it back to Frank.
So right now, it's divided equally amongst all the column save, you wanted to get specific lives,
save you on the first column to me, 200 pixels, second column to me, just a hundred pixels.
Third column to me say.
Dr. Deep exults.
Food golem to be 500 pixels on, lost volume, to be hundred fifty pixels, let's say red.
And as you can see, all these different columns have different ways because you define different width
for these columns.
All right.
So let's just bring it back to different now.
So let's see until autumn, 12, 12 too often.
So they've given five orders here.
That means five columns.
All right.
So that does the job now.
And as you can see, the entire upgraded spanning across the world.
Now, let's say you want everything to be in the start.
So we could do justice by content.
Unseen star Sindelar.
And as you can see, nothing changes because you specify the group to date the entire with.
So for that, let's try changing the words for now.
So let's say set off these Ordos.
Let's give them.
Hundred fifty pixels each.
So we needed five, two, three, four, five on the table.
And as you can see, my diagram isn't the star.
So towards the left.
Similarly, see, I wanted everything to be at the end of the right so I could simply use this value
in or I wanted my diagram to be in the center of the screens.
Like with System Center or letting you want to utilize this left hand like space.
So for that, we could do, say, space between so all the space would be divided equally in between
these columns.
So as you can see you or you want to disgrace to me around some dust and case we could do space around.
And now we've got space on the left and right side of the grid as well.
That's how you can align your grid with.
Left, right, center or odd space in between or around.
All right.
So now let's just bring everything back to the way it was.
So let's assume it does justify quantum.
And instead of those hundred fifty pixels, let's make it up to one, two, three, four, five.
The team.
And as you can see, the bodies find columns in each of these five cards in each floor.
Now, moving on.
So what we want is to have just three guards, four tablet screens.
And to go to split mobile screens.
So for that, we can use mediocrities.
So let's adamantly agree here.
So media.
Marks would.
Saying 900 dark suits under one book are golden number of.
So let's just copy the scenario listed here.
So this Ratones minister is saying much more to one does we just want to bottom so we can remove these
extra that seem it, let us inspect, try opening it on an eye pattern.
So coming here.
And as you can see, we've just got these three problems.
Similarly, from white screens, we just want to do so, we can add another made, really, so Midia
Knox would say four hundred pixels.
That's just Sculpey, this.
So instead of three, you just need to save it.
Let's start changing.
Two more did you four.
And as you can see, we just got to do in each room or say we just wanted one so we could remove this
also and we would just have one in each room.
And guys, that's how you can use grid and grid WD to design response.
Now it's.
That's all for today, guys.
If there's something that you would not understand.
Feel free to drop a comment on.
We will discuss it.
See you in the next video.
Bye.
And take care.