‫Now, let me jump back to my coordinator and start working with our current example.
‫Now here, I have to find a quick there and inside this, I have multiple elements.
‫Now remember, whenever we are working with a layout, we are going to work in the form of parent and
‫child relationship.
‫Here my parent is container and these item one item do all our child.
‫I've also added a common class called items, so I can control similar design on all of them.
‫And I have added some simple design so I can have different colors as well as some background.
‫So if you jump here with our style, our cast, I've included font, not as my Google font, then I
‫have default font family and some information like background color banding and this simple design that
‫that's not code now had one thing I did, which is important and I have included display as great.
‫Now this is where things are going to work now since my period is great.
‫That means oldest child are going to follow something about that layout, about its property.
‫So here we are going to discuss about our first resource, which is District a complete guide to great.
‫Now again, this is going to follow something similar like we did with Flexbox, but at this point of
‫time, you don't have to jump ahead and do anything.
‫First, I'm going to explain things with practical example here.
‫Later on, you have to jump onto this guide and understand more.
‫Similarly, with this second guide itself learns, yes, great Dot-Com Simple Guide that is going to
‫discuss everything that we are going to experiment.
‫OK.
‫No fancy stuff.
‫So that's it.
‫I'm going to close both of them.
‫Let me just have them on site.
‫And also we have this whole tool, which is going to help us a lot.
‫Let me clear this up.
‫Yup.
‫So, yeah, so this is where we are going to.
‫Now, by default, when we use credit, we are going to follow a sequence of top-to-bottom.
‫Again, we have multiple rules.
‫That means one rule is going to have one item at this point of time on, I should say one, Roy is going
‫to have one child.
‫Right click click on Inspect.
‫This is out there and how you can see a simple sign off grid.
‫Now here you will see points like one two three four five six.
‫We'll be discussing about this.
‫It's important for now.
‫You can remember the math lines, grid lines.
‫OK, we are going to discuss this last point.
‫Also, here we are following a normal sequence.
‫OK, now let me get back here and start playing with this.
‫Since this is a patent, so we are going to have certain properties regarding patent OK properties for
‫bidding and then we are going to have properties for children.
‫We are going to call them as container child.
‫We are going to call them as item.
‫OK, that said, that said, I'm going to repeat things because certain students are not going to watch
‫Flexbox and they are directly going to jump here on sixth grade.
‫So it's important to balance both of them.
‫OK.
‫And if you are watch Flexbox, you will have decent revision, but there are different type of concept.
‫Don't worry.
‫OK, so this is parent we have included are great.
‫Now let's start with discussion about how we are going to have multiple call on how we are going to
‫have multiple rules at this point of time.
‫We only have one column, you see.
‫This is one complete column and inside this column we have everything.
‫So that means if I jump on to my tool and here we have this column, here we have this rule.
‫So at this point of time are following some similar path where we have one column you can see this whole
‫is one column and then we add one two three and keep on falling.
‫That means multiple child.
‫So I can one two three four five six like this?
‫OK, but what we can do to add multiple columns, we have property as great template columns, so all
‫you have to do is utilize great template columns.
‫And now this is going to take values, multiple values in the form of column size.
‫Yes.
‫So if I say 50 percent space, 50 percent, that means we are going to have two columns.
‫The first column size will be 50 percent.
‫The second column size will be 50 percent.
‫If I save this one.
‫Get back here.
‫Yup, that's one.
‫OK, let me uncheck this great box.
‫OK, so now we have two columns column one, column two, and we are following one two three four five
‫six.
‫This is the sequence that we are following now.
‫If you click on this grade, you will see that we have divided nation like one column and two column.
‫OK.
‫Hope you got the idea.
‫Now you can pass any type of value.
‫You can pass pixels, you can pass them, you can pass percentage.
‫And there is one other specific value that is designed specifically for.
‫Yes, it's great that we will discuss in a while, but here, if I want to divide them into three columns,
‫I can see percentage 50 again.
‫And this is not going to set right because Matt doesn't work like this.
‫So be our person and we cannot do this.
‫So let's say 200 pixel, 500 pixels and then pixels, for example, save this one.
‫Get back here now.
‫Had this is 200 pixel, this is what is this 500 pixel and this is 10 pixel.
‫Let me try to increase the topic, maybe under pixels, save this one.
‫OK, so this is how column thing is going to work.
‫Why?
‫Because we are providing multiple values according to our own column.
‫Remember this part?
‫Or no, let me remove this one.
‫Now there is one specific value that we can utilize only with spaces good, which is if my if I see
‫one, if I.
‫Wonderful and wonderful and save this one.
‫Here you can see all of them are divided equally, so you can see these are three columns which are
‫divided equally.
‫Now what is this one I find?
‫This is fractional unit.
‫Now if I say wonderful, wonderful, wonderful.
‫So in total, there are three fan that is heavily well spaced and we have divided into one ratio one
‫ratio one nine five zero one four, three, four and one half of that means we total we have five space
‫and then one ratio is given to this.
‫One ratio is given to this column and three ratios given to this column.
‫If I get back here, you can see one ratio, three ratio and one ratio.
‫So that's how this is going to work and this is important.
‫This helps us to keep our things in sequence and remember all the available spaces divided among these
‫three.
‫And if I tried to squeeze them and push them to the limited space, you will see most of this space
‫is gone.
‫So that's how this is going to work.
‫Now, the way we have controlled our column in the similar way we can control our role.
‫For example, currently we have two rules.
‫So what I'm going to utilize is a great template too.
‫And I am going to distribute them differently.
‫One example, the first one, I am going to pass one apart, or I should add three or five for the first
‫one and the second row, I'm going to pass five at five.
‫So let's say three, five and five, four five.
‫That means if total I have eighty pixels, I will pass 30 pics, including Vostro and 50 pixels to the
‫second rope.
‫And let me also give some space here for, let's say, if I have haidar's.
‫8-Bit, for now, save this one.
‫Get back here.
‫Hey, you can see the example that means this is three far this complete row is three four and the second
‫row is five five.
‫So that's how this whole thing is going to work.
‫Now this whole thing gave us too much control over our structure, what our layout.
‫And if you remember the tool that we utilize, similarly, if I try to add three rows here and try to
‫remove two here, you can see I can design things now.
‫One thing we can do is we can have three column, then we can decrease the size of our current items
‫and then we can decrease the size of our current row and design something similar, if you remember.
‫Something like this, so I can design drawing and them in this way.
‫Now we still have a lot of things to understand, like how to combine these four elements and also how
‫to combine these two elements.
‫We can do we can do later, don't worry.
‫But I hope you got the idea how we are going to control things.
‫OK.
‫This looks great for now, and we have this understanding about great template as well as column.
‫Now there is one on that property, which is known as Gap.
‫So all the gaps that currently we have between our different type of elements, we can maintain them
‫so we can have OK, we can utilize padding and other things.
‫But by default, there is a thing with great, which is known as great gap.
‫So there are two types great column gap and great row gap.
‫Great column gap, and if I say one room here and save this one.
‫You will see a gap between each column.
‫Now, remember, the last one is not by our grade.
‫This is by our padding.
‫This whole green thing is by our padding.
‫But the gap between these two column is biodegrade, so that is my grade column gap.
‫And then if I try to add something similar for our row.
‫Save this one.
‫And this is going to be our great road gap.
‫So that's how this whole great gap works.
‫One quick disclaimer, remember, these both properties will not work in future.
‫That means great quantum gap as well as grid rule gap will not work in future.
‫Instead of this, you have to use quantum gap as well as rule gap.
‫We will discuss about this later in the course also.
‫But remember, currently I'm using great column gap.
‫This is going to work right now.
‫Absolutely fine, but in future, this method will not work.
‫You have to use column gap instead of using grid program.
‫You need to use rule gap.
‫Remember this point?
‫These two properties might not work in future.
‫So better use.
‫Quantum gap, as well as rule gap.
‫And don't worry, we will discuss about them in future also.
‫Now, by default, when we divide things, everything is going to take one item, so if I divide anything
‫in the terms of column and row, we are going to take one item each.
‫OK.
‫So all of this is working fine.
‫And remember, we are going to talk about that shorthand property or this whole column and row.
‫We'll be talking about charting property for this gap also.
‫So that's all for this lecture now.
‫I hope you got the basic idea how we are going to work with Grade nine, the next lecture.
‫Let us advance some stuff.
‫Talk about either shorten tricks, talk about how to add more content and design it and then play with
‫some game.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.