1
00:00:00,690 --> 00:00:01,320
‫Hey, there.

2
00:00:01,410 --> 00:00:02,160
‫Welcome back.

3
00:00:02,210 --> 00:00:03,180
‫Shove on the side.

4
00:00:03,600 --> 00:00:06,510
‫Now let us start his journey with CSX Great.

5
00:00:07,050 --> 00:00:08,490
‫Another important topic.

6
00:00:08,610 --> 00:00:12,360
‫And remember, we utilized years this great to design layout.

7
00:00:13,110 --> 00:00:17,350
‫Now, before diving deep into all the concerned different websites.

8
00:00:17,370 --> 00:00:20,280
‫Example, I want to discuss about two things.

9
00:00:20,430 --> 00:00:27,060
‫The first one is it is impossible for you to understand everything regarding sixth grade in just one

10
00:00:27,060 --> 00:00:27,330
‫go.

11
00:00:27,930 --> 00:00:33,480
‫We will understand about it, try to implement it using some example and play our game to understand

12
00:00:33,480 --> 00:00:34,110
‫it better.

13
00:00:34,380 --> 00:00:38,490
‫Then I would refer you to some reading guide so you can have better understanding.

14
00:00:38,880 --> 00:00:44,940
‫So it is going to take time, to be honest, and you need patience to understand this, to be honest.

15
00:00:45,540 --> 00:00:50,700
‫The second thing is, if you have knowledge about Flexbox, it will be easy for you to understand.

16
00:00:50,880 --> 00:00:57,900
‫Yes, it's great because Flexbox is utilized to create layout fierce as great as utilized to create

17
00:00:57,900 --> 00:00:58,410
‫layout.

18
00:00:58,800 --> 00:01:04,900
‫So there will be several similar items as well as if you understand about how to design layout with

19
00:01:04,900 --> 00:01:09,480
‫Flexbox, it will be much easier to understand the concept in different.

20
00:01:10,290 --> 00:01:18,960
‫And also remember one point that you can utilize both Flexbox and is this grid to design layout on a

21
00:01:18,960 --> 00:01:21,510
‫single project on a single website itself?

22
00:01:21,780 --> 00:01:28,680
‫For example, maybe you created a complete home page on everything with the help of Flexbox, but maybe

23
00:01:28,740 --> 00:01:32,310
‫just one that you want to design a layout with is as good.

24
00:01:32,430 --> 00:01:33,390
‫You can do that.

25
00:01:33,750 --> 00:01:36,240
‫So make sure you remember this point.

26
00:01:36,240 --> 00:01:39,270
‫Most wouldn't confuse or mess out this point.

27
00:01:39,660 --> 00:01:47,040
‫They either use only Flexbox or they either use only CSS is great, but you can use both on your project.

28
00:01:47,400 --> 00:01:53,940
‫For example, you have complete website with Flexbox, but you want to implement CSS Grid on this one

29
00:01:53,940 --> 00:01:54,510
‫section.

30
00:01:54,810 --> 00:01:55,890
‫You can do that.

31
00:01:55,890 --> 00:02:01,170
‫Remember, you can utilize both Flexbox and CSS grid together.

32
00:02:01,860 --> 00:02:06,120
‫That said, that's the basic connection knowledge before we dive deep.

33
00:02:06,990 --> 00:02:10,680
‫So want to see us as grid how it is different from Flexbox?

34
00:02:11,010 --> 00:02:12,690
‫Let us discuss this topic first.

35
00:02:14,010 --> 00:02:19,170
‫Now, if you remember when we worked with Flexbox, we were following our direction.

36
00:02:19,200 --> 00:02:25,290
‫If I take a quick example with Flexbox playground, here we are following our direction, either in

37
00:02:25,470 --> 00:02:28,920
‫terms of raw or either in terms of column.

38
00:02:29,470 --> 00:02:32,640
‫So that means Flexbox is one dimensional.

39
00:02:33,030 --> 00:02:34,500
‫That means one element.

40
00:02:34,500 --> 00:02:39,930
‫Or I should say one build can follow either direction or column direction.

41
00:02:40,350 --> 00:02:45,120
‫Then we can definitely list different items and then say, OK, this is going to be column.

42
00:02:45,120 --> 00:02:46,270
‫This is going to be raw.

43
00:02:46,530 --> 00:02:47,430
‫We can do that.

44
00:02:47,760 --> 00:02:55,260
‫But at one point of time, Flexbox is one direction because we are either following column or we are

45
00:02:55,260 --> 00:03:00,990
‫either following Arrow, then yes, you can definitely our child to decide Domain Zero and column.

46
00:03:00,990 --> 00:03:04,830
‫You can do that, but by default it does one dimensional.

47
00:03:05,250 --> 00:03:09,420
‫But if I dig example of ceaseless grid, it is two dimensional.

48
00:03:09,750 --> 00:03:13,590
‫That means I can add item anywhere in my row and column.

49
00:03:14,040 --> 00:03:19,350
‫So basically, when we walk with CSAs grid, we divide things according to grid itself.

50
00:03:19,530 --> 00:03:20,550
‫You see these lines.

51
00:03:20,940 --> 00:03:24,360
‫Yep, we will divide things exactly this in the terms of code.

52
00:03:24,780 --> 00:03:26,700
‫Don't worry about all this code.

53
00:03:26,930 --> 00:03:30,870
‫I think we will discuss in-depth with the help of our own example.

54
00:03:31,380 --> 00:03:35,850
‫But here you see, everything that we do is dependent on row and column.

55
00:03:36,510 --> 00:03:42,720
‫Now how we are going to utilize it, we can design things like maybe let's design YouTube now easily.

56
00:03:43,050 --> 00:03:48,000
‫So what I am going to do is, if you remember YouTube has nowhere, then we have at the top.

57
00:03:48,000 --> 00:03:51,180
‫We have search and then we have some buttons regarding profile.

58
00:03:51,750 --> 00:03:53,730
‫So suppose if I try to do this.

59
00:03:55,990 --> 00:03:59,800
‫Now here, I can give this as logo section.

60
00:04:02,980 --> 00:04:05,770
‫And maybe this is our third section.

61
00:04:08,530 --> 00:04:14,450
‫And this is odd profile button section, and here we can march both of them.

62
00:04:14,470 --> 00:04:21,640
‫That means these two columns will be together and you'll see sidebar here that has all the information

63
00:04:21,640 --> 00:04:24,550
‫regarding subscription home and everything else.

64
00:04:25,060 --> 00:04:30,670
‫So we can call this our sidebar section and we can merge all these four column and rows.

65
00:04:30,670 --> 00:04:38,080
‫That means element and say this is going to be read or recommendations or video recommendations section.

66
00:04:38,770 --> 00:04:41,830
‫So that's how you can design things with grid.

67
00:04:42,460 --> 00:04:49,930
‫You have access to everything in the form of row column, and you can add element anywhere.

68
00:04:50,770 --> 00:04:57,430
‫If you see, now I have designed this, I just need to select my logo class and add my image here and

69
00:04:57,430 --> 00:04:57,640
‫here.

70
00:04:57,640 --> 00:05:00,190
‫I need to select my search, then profile.

71
00:05:00,190 --> 00:05:02,190
‫Add anything else in my sidebar.

72
00:05:02,350 --> 00:05:08,050
‫I can stop working, or I can also now create a nested grid.

73
00:05:08,470 --> 00:05:13,450
‫Or maybe I can provide a display flex and add item in the form of row and column itself.

74
00:05:14,110 --> 00:05:18,520
‫So I totally have control how I'm going to design my layout.

75
00:05:19,900 --> 00:05:21,430
‫I hope this lecture was helpful.

76
00:05:21,580 --> 00:05:22,660
‫Thank you for calling.

77
00:05:22,750 --> 00:05:24,580
‫And I see you guys in the next one.