‫Hey, there.
‫Welcome back.
‫Shove on the side.
‫Now let us start his journey with CSX Great.
‫Another important topic.
‫And remember, we utilized years this great to design layout.
‫Now, before diving deep into all the concerned different websites.
‫Example, I want to discuss about two things.
‫The first one is it is impossible for you to understand everything regarding sixth grade in just one
‫go.
‫We will understand about it, try to implement it using some example and play our game to understand
‫it better.
‫Then I would refer you to some reading guide so you can have better understanding.
‫So it is going to take time, to be honest, and you need patience to understand this, to be honest.
‫The second thing is, if you have knowledge about Flexbox, it will be easy for you to understand.
‫Yes, it's great because Flexbox is utilized to create layout fierce as great as utilized to create
‫layout.
‫So there will be several similar items as well as if you understand about how to design layout with
‫Flexbox, it will be much easier to understand the concept in different.
‫And also remember one point that you can utilize both Flexbox and is this grid to design layout on a
‫single project on a single website itself?
‫For example, maybe you created a complete home page on everything with the help of Flexbox, but maybe
‫just one that you want to design a layout with is as good.
‫You can do that.
‫So make sure you remember this point.
‫Most wouldn't confuse or mess out this point.
‫They either use only Flexbox or they either use only CSS is great, but you can use both on your project.
‫For example, you have complete website with Flexbox, but you want to implement CSS Grid on this one
‫section.
‫You can do that.
‫Remember, you can utilize both Flexbox and CSS grid together.
‫That said, that's the basic connection knowledge before we dive deep.
‫So want to see us as grid how it is different from Flexbox?
‫Let us discuss this topic first.
‫Now, if you remember when we worked with Flexbox, we were following our direction.
‫If I take a quick example with Flexbox playground, here we are following our direction, either in
‫terms of raw or either in terms of column.
‫So that means Flexbox is one dimensional.
‫That means one element.
‫Or I should say one build can follow either direction or column direction.
‫Then we can definitely list different items and then say, OK, this is going to be column.
‫This is going to be raw.
‫We can do that.
‫But at one point of time, Flexbox is one direction because we are either following column or we are
‫either following Arrow, then yes, you can definitely our child to decide Domain Zero and column.
‫You can do that, but by default it does one dimensional.
‫But if I dig example of ceaseless grid, it is two dimensional.
‫That means I can add item anywhere in my row and column.
‫So basically, when we walk with CSAs grid, we divide things according to grid itself.
‫You see these lines.
‫Yep, we will divide things exactly this in the terms of code.
‫Don't worry about all this code.
‫I think we will discuss in-depth with the help of our own example.
‫But here you see, everything that we do is dependent on row and column.
‫Now how we are going to utilize it, we can design things like maybe let's design YouTube now easily.
‫So what I am going to do is, if you remember YouTube has nowhere, then we have at the top.
‫We have search and then we have some buttons regarding profile.
‫So suppose if I try to do this.
‫Now here, I can give this as logo section.
‫And maybe this is our third section.
‫And this is odd profile button section, and here we can march both of them.
‫That means these two columns will be together and you'll see sidebar here that has all the information
‫regarding subscription home and everything else.
‫So we can call this our sidebar section and we can merge all these four column and rows.
‫That means element and say this is going to be read or recommendations or video recommendations section.
‫So that's how you can design things with grid.
‫You have access to everything in the form of row column, and you can add element anywhere.
‫If you see, now I have designed this, I just need to select my logo class and add my image here and
‫here.
‫I need to select my search, then profile.
‫Add anything else in my sidebar.
‫I can stop working, or I can also now create a nested grid.
‫Or maybe I can provide a display flex and add item in the form of row and column itself.
‫So I totally have control how I'm going to design my layout.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.