Hello, everyone.
Welcome back.
In today's video, we will learn how to modify an item related properties to design complex levels.
Say you have to design this layout so you've got a header site run on the left.
On the right, a space for some are in the same dose and space for the main content.
And at the bottom of footprint, I'm on tablet screens.
This right odd section.
If it goes below you mean and menu.
On mobile screens, even the main component comes in the next line, often menu.
So, as you can see, it is very responsive, loud on different screen sizes.
It renders differently.
So let's try creating this right now.
What we have is we have these a couple of divisions with different colors and which represent different
part of our with each one working with complex levels.
The best way is to split your screen with in2 twelve columns or six columns based on the different number
of components inside your depth.
So if you see here, we've got a one, two, three toes and one, two, three columns.
So I guess we can go with six.
We can go with three orderlies.
Giving this extra weight to some confidence and giving a smaller leg to some comments would be difficult.
So going with takes makes more sense.
So what we're looking at is six columns on Titos inside the green.
All right.
So coming back here.
All right, let's begin.
Let's bring about good and do.
And as you can see here, this division of drugs, all her other competence, and it has got an I.D.
grid container.
So let's add some Stine's.
So harsh, good.
And Dana, let's start making a display grid.
So this big grid.
And now to design the structure of entire now great delight us with a property called grid template
areas.
So here you can specify the exact number of tools and qualities which competence with Occupy Michal's
and columns.
So let's say.
Grid template areas.
And before we could specify rows and columns, we have to give names to all of these components.
So for that, it gives us another property called grid area.
So let's see.
This is headers.
Header.
Similarly.
Well, that's good.
See sidebar.
For this to be good, call it mean similarly for a sighted.
We could call it.
So.
Until further, we can call it Futter.
So not coming here, so to define how many columns are going to come in a row.
We have to define six to eight, right.
So that tells our grid that we're looking at six columns.
So let's say on the dot, we want all the six to be given by hand.
So we could do something like this.
So do the specified eight or six times.
So what this does is it's going to give them dire first header.
Let's bring it down here.
Now, if you see here.
So now what we want to do is we want to have this menu on the left, on this side, on the right and
the guandong in the middle.
So first we get a menu.
Then at the end, we can have a sign in between, we can out all the mean so we can put forward mean
guidance.
And after that, we'll just have a footnote and one deputy then Dyer.
So a guy just like Heather, you could do like this.
Let's say we're coming back here.
All right.
So it's not working.
Let's see what's the issue here.
OK.
This looks fun.
You all right?
So the problem is.
For this credit area, it's given some spring rowlings, which doesn't accepters.
So we don't need to double go to signal goods to our area names.
We could simply give it a value see header or sidebar without dropping them.
And it's in the order of goods.
Sir, remove all this.
And we save it.
We see our grid is just not the menu item as outsiders to see what's the issue here.
So for many, though, we'll do a sidebar and give you a good many of you.
So let's just update the rally.
So coming back, as you can see, we've got the header than many on the left, me in the middle.
On the right hand side, you've got a light on.
At the bottom, you've got four do.
All right.
Now, if we open this on a DOBs screen.
So like this.
That's.
But it still is showing the motion that we had on this dome.
Not change if we can add some mediocrities.
So let's see at the media marks where, say, 900 pixel.
And all we have to do is just a bit this grid template.
US.
So as you can see here on the tablet screen, the right or the outside element is below me, Mindy.
So we could do that.
So instead of waiting outside of there, you can give.
And others will do aside.
Three, four, five.
And we've got given all the columns to a site for the screw on.
We have to increase one for me.
You save it.
And coming back.
And as you can see, we've got many and on the right hand side, you've got me.
All right.
Similarly for small mobile screens.
What we want is this main tool to win the next group.
So for now, we can have another redecorated.
So that's what it is.
So, Max, with could be 400 pixels.
We're talking about small screen sizes.
So in this case, we can just give back Diana to me and add another rule before it for the sidebar.
Let's say the oncoming UCU.
And now, as you can see, you've got to head to the mini main.
Right on foot.
All studd below each other.
If I change the screen size and it's a iPod.
It changes.
Or if you just move it, it goes back to the desktop oge.
So as you can see, this is a pretty low response of the beach or different screen sizes or trying different
components at different positions.
Now, this this might not seem like much.
So this is just the structure of it.
It's instead of this head or you can argue in Dyatlov lover of the design, Delbar, on the left hand
side at the place of the side.
But you can have some menu items on which you can update your main content on this right hand side or
a side.
You can have an Eid section or some such issues that you would like to show your users.
And of course, of the photo you can have notes for the links.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment on.
We will discuss it.
See you in the next video.
Bye.
And Dick.