1 00:00:01,990 --> 00:00:05,150 What is the CSS grid? 2 00:00:05,150 --> 00:00:09,160 As Flex box the grid is a default feature, 3 00:00:09,160 --> 00:00:13,140 a default technology CSS ships with 4 00:00:13,140 --> 00:00:15,240 this means you don't have to install it 5 00:00:15,240 --> 00:00:16,320 through anything like this. 6 00:00:16,320 --> 00:00:17,800 It's always there 7 00:00:19,200 --> 00:00:22,410 where Flex box shines in one dimensional 8 00:00:22,410 --> 00:00:23,880 layouts, we saw this, 9 00:00:23,880 --> 00:00:27,158 we can use it greatly to align elements 10 00:00:27,158 --> 00:00:29,360 in the role or in a column. 11 00:00:29,360 --> 00:00:31,140 This works perfectly. 12 00:00:31,140 --> 00:00:33,746 The grid shines whenever it comes to 13 00:00:33,746 --> 00:00:35,950 two dimensional layouts. 14 00:00:35,950 --> 00:00:38,835 This means, whenever we want to create the layout 15 00:00:38,835 --> 00:00:41,840 where we have to control about the columns 16 00:00:41,840 --> 00:00:44,090 and or the rows, 17 00:00:44,090 --> 00:00:45,970 now in this and the next lectures, 18 00:00:45,970 --> 00:00:49,480 we'll dive into the CSS grid basics. 19 00:00:49,480 --> 00:00:53,380 You can find more detailed information about the CSS grid 20 00:00:53,380 --> 00:00:55,383 towards the end of this module. 21 00:00:56,390 --> 00:00:58,160 However, to get started here, 22 00:00:58,160 --> 00:01:01,610 you can find this project attached to the lecture. 23 00:01:01,610 --> 00:01:04,287 As you see, we just have the body element here, 24 00:01:04,287 --> 00:01:06,757 which contains an unordered list 25 00:01:06,757 --> 00:01:10,203 with several list items here, name card. 26 00:01:10,203 --> 00:01:13,703 As we have these cards on our website, 27 00:01:15,420 --> 00:01:16,620 if we check the code, 28 00:01:16,620 --> 00:01:17,670 you see the same thing, 29 00:01:17,670 --> 00:01:20,380 which has to have this basic HTML code 30 00:01:20,380 --> 00:01:22,060 and in the styles file. 31 00:01:22,060 --> 00:01:23,880 We have some styling for the body, 32 00:01:23,880 --> 00:01:26,051 some styling for the unordered list 33 00:01:26,051 --> 00:01:28,720 and some styling for the list items. 34 00:01:28,720 --> 00:01:31,243 Nothing we don't know about so far. 35 00:01:32,580 --> 00:01:36,190 If we look at the way our cards are aligned 36 00:01:36,190 --> 00:01:37,340 at the moment though, 37 00:01:37,340 --> 00:01:39,697 we have a default block element alignment. 38 00:01:39,697 --> 00:01:43,653 So each element is sitting below the other one. 39 00:01:45,000 --> 00:01:47,460 If we think back about our project, 40 00:01:47,460 --> 00:01:49,140 to structure the lay out, 41 00:01:49,140 --> 00:01:51,710 we want to create here is a layout 42 00:01:51,710 --> 00:01:55,247 where we have two columns as a first step. 43 00:01:55,247 --> 00:01:57,421 So in here with our eight cards, 44 00:01:57,421 --> 00:01:58,920 this would mean that the 45 00:01:58,920 --> 00:02:01,480 first column should have four cards. 46 00:02:01,480 --> 00:02:04,627 And the second column should also have four cards. 47 00:02:04,627 --> 00:02:08,402 How can we create such a layout with the grid now? 48 00:02:09,350 --> 00:02:14,300 Well, the grid basically follows the core logic of Flex box. 49 00:02:14,300 --> 00:02:16,700 Again, we can create a container, 50 00:02:16,700 --> 00:02:18,160 a grid container, 51 00:02:18,160 --> 00:02:22,223 which is the parent of our items inside our grid. 52 00:02:23,270 --> 00:02:25,898 And then this flex container will allows us 53 00:02:25,898 --> 00:02:28,510 to define what should happens with the 54 00:02:28,510 --> 00:02:30,533 elements nested into it. 55 00:02:31,407 --> 00:02:34,353 If we think about our project set up here, 56 00:02:34,353 --> 00:02:37,340 this would mean that our unordered list here, 57 00:02:37,340 --> 00:02:39,520 which holds the list items should 58 00:02:39,520 --> 00:02:42,347 become our grid container 59 00:02:42,347 --> 00:02:44,000 to do that. 60 00:02:44,000 --> 00:02:47,040 We can go to our CSS code, 61 00:02:47,040 --> 00:02:49,743 to the unordered list type selector, 62 00:02:50,843 --> 00:02:53,200 and here add display grid 63 00:02:55,240 --> 00:02:56,693 with this in place, 64 00:02:57,730 --> 00:03:00,290 nothing changes, which is not correct. 65 00:03:00,290 --> 00:03:02,070 You see that the distance between 66 00:03:02,070 --> 00:03:04,360 our elements increased sort of margin. 67 00:03:04,360 --> 00:03:08,140 So to say, and in our deaf tools, 68 00:03:08,140 --> 00:03:11,000 we see that the grid option is now available. 69 00:03:11,000 --> 00:03:13,100 If we click it as we did it 70 00:03:13,100 --> 00:03:15,439 with the flex option here for Flex box 71 00:03:15,439 --> 00:03:18,940 you see that somehow we have these counters 72 00:03:18,940 --> 00:03:21,520 for the rows top to bottom 73 00:03:21,520 --> 00:03:24,143 and for the columns left to right. 74 00:03:25,490 --> 00:03:28,480 Okay. So far, this doesn't help us a lot. 75 00:03:28,480 --> 00:03:32,313 How can we now create this two column layout? 76 00:03:33,960 --> 00:03:36,060 Well, with the grid being applied, 77 00:03:36,060 --> 00:03:38,270 we now have full control about 78 00:03:38,270 --> 00:03:40,530 the way these elements are displayed 79 00:03:40,530 --> 00:03:44,473 about the layouts of these elements inside our grid. 80 00:03:45,900 --> 00:03:47,830 One option to therefore create 81 00:03:47,830 --> 00:03:50,150 a predefined layout is with 82 00:03:50,150 --> 00:03:53,720 the grid template columns property. 83 00:03:53,720 --> 00:03:57,210 Now let's go to the code and let's add this. 84 00:03:57,210 --> 00:03:58,710 So grid, 85 00:03:58,710 --> 00:04:00,450 template, 86 00:04:00,450 --> 00:04:01,610 columns. 87 00:04:01,610 --> 00:04:03,070 What is this now? 88 00:04:03,070 --> 00:04:04,580 Well, this 89 00:04:04,580 --> 00:04:08,610 property allows us to predefine a specific 90 00:04:08,610 --> 00:04:09,840 column count 91 00:04:09,840 --> 00:04:11,723 inside of our grid. 92 00:04:12,750 --> 00:04:13,960 Now you could say, well, 93 00:04:13,960 --> 00:04:15,340 we want to have two columns 94 00:04:15,340 --> 00:04:17,470 so I can just enter two. No, 95 00:04:17,470 --> 00:04:19,290 that's not how it works. 96 00:04:19,290 --> 00:04:21,399 We have to define a value 97 00:04:21,399 --> 00:04:23,360 for each single column 98 00:04:23,360 --> 00:04:25,240 that we want to create. 99 00:04:25,240 --> 00:04:27,890 And each value has to specify 100 00:04:27,890 --> 00:04:31,513 the width off that column, inside our grid. 101 00:04:32,680 --> 00:04:34,163 At the moment, for example, 102 00:04:35,098 --> 00:04:37,656 we have a width for the unordered list, 103 00:04:37,656 --> 00:04:38,950 which is our container off the grid 104 00:04:38,950 --> 00:04:42,600 of 800 pixels. Therefore we could say 105 00:04:42,600 --> 00:04:44,891 we create one column with a width of 106 00:04:44,891 --> 00:04:46,563 400 pixels. 107 00:04:47,630 --> 00:04:51,030 Now we add a space and create a second column. 108 00:04:51,030 --> 00:04:52,970 Also with 400 pixels 109 00:04:54,370 --> 00:04:56,650 with this in place, you see, 110 00:04:56,650 --> 00:05:00,103 we immediately created our two column layout. 111 00:05:01,870 --> 00:05:04,300 And if we look at our unordered list, 112 00:05:04,300 --> 00:05:07,990 you see that the entire content of that list is 113 00:05:07,990 --> 00:05:08,950 800 pixels, 114 00:05:08,950 --> 00:05:12,370 which is not occupied by the elements 115 00:05:12,370 --> 00:05:13,823 inside our grid, 116 00:05:16,921 --> 00:05:18,040 the area around here. 117 00:05:18,040 --> 00:05:20,370 So the screen part is just a padding 118 00:05:20,370 --> 00:05:21,203 that we added. 119 00:05:21,203 --> 00:05:23,380 You can see this down here. 120 00:05:23,380 --> 00:05:24,553 This is our padding. 121 00:05:25,920 --> 00:05:26,753 However, 122 00:05:26,753 --> 00:05:28,980 What happens if we don't exactly 123 00:05:28,980 --> 00:05:31,520 used the entire width available? 124 00:05:31,520 --> 00:05:33,430 Code, for example, in our code say 125 00:05:33,430 --> 00:05:36,670 that the first column should have 400 pixels. 126 00:05:36,670 --> 00:05:39,495 And the second one only 200, 127 00:05:39,495 --> 00:05:41,100 what happens then 128 00:05:42,050 --> 00:05:42,913 let's see you. 129 00:05:43,870 --> 00:05:47,090 Well, D width used for our elements. 130 00:05:47,090 --> 00:05:49,730 Indeed decreases. See right here, 131 00:05:49,730 --> 00:05:53,070 the elements in the second column are smaller 132 00:05:53,070 --> 00:05:54,940 and we have some unused space 133 00:05:54,940 --> 00:05:57,107 in the right part of our grid. 134 00:05:57,107 --> 00:05:59,800 This means our grid still could use 135 00:05:59,800 --> 00:06:02,360 the entire width that we defined in here. 136 00:06:02,360 --> 00:06:05,170 So our 800 pixels of the content, 137 00:06:05,170 --> 00:06:09,990 but we only use the grid for this limited amount of space. 138 00:06:09,990 --> 00:06:13,040 Now this can be an intended behavior 139 00:06:13,040 --> 00:06:15,030 or a mistake. Therefore, 140 00:06:15,030 --> 00:06:18,166 typically when working with such grid template columns, 141 00:06:18,166 --> 00:06:20,539 we don't work with pixels here. 142 00:06:20,539 --> 00:06:23,640 We use so-called fractions. 143 00:06:23,640 --> 00:06:25,790 A fraction simply defines 144 00:06:25,790 --> 00:06:29,430 the available space off the area, 145 00:06:29,430 --> 00:06:30,900 wearable in the grid that we want 146 00:06:30,900 --> 00:06:35,130 to apply for this specific column. 147 00:06:35,130 --> 00:06:35,970 This means 148 00:06:36,805 --> 00:06:38,610 if we change 149 00:06:38,610 --> 00:06:40,420 our 400 pixels here 150 00:06:41,270 --> 00:06:43,220 to one fraction 151 00:06:43,220 --> 00:06:44,510 written FR 152 00:06:44,510 --> 00:06:47,343 like this F R stands for fraction, 153 00:06:49,204 --> 00:06:51,360 then the second column 154 00:06:51,360 --> 00:06:53,260 occupies the 200 pixels that we 155 00:06:53,260 --> 00:06:56,390 defined and see down here. 156 00:06:56,390 --> 00:07:00,693 The first column occupies the remaining width. 157 00:07:02,070 --> 00:07:04,630 The content still is 200 pixels here, 158 00:07:04,630 --> 00:07:06,700 but as you see with the margin, 159 00:07:06,700 --> 00:07:09,210 we use this entire space available 160 00:07:09,210 --> 00:07:11,367 adding up to 600 pixels. 161 00:07:11,367 --> 00:07:14,600 So this is a fraction. 162 00:07:14,600 --> 00:07:18,810 We could also achieve the skull differently 163 00:07:18,810 --> 00:07:20,969 if we go back and now say 164 00:07:20,969 --> 00:07:25,230 that our second column should use one fraction 165 00:07:25,230 --> 00:07:26,929 of the remaining space 166 00:07:26,929 --> 00:07:31,300 and the first column should use two fractions. 167 00:07:31,300 --> 00:07:33,800 What do you think will happen then? 168 00:07:33,800 --> 00:07:34,633 Let's see. 169 00:07:35,720 --> 00:07:40,210 Now our first column, again, uses more space. 170 00:07:40,210 --> 00:07:42,140 Now we know that the entire width 171 00:07:43,326 --> 00:07:45,057 is divided into free fractions. 172 00:07:45,057 --> 00:07:46,960 Two of these fractions should be 173 00:07:46,960 --> 00:07:49,273 applied for the first column, right here. 174 00:07:49,273 --> 00:07:53,210 One fraction should be applied to the second column. 175 00:07:53,210 --> 00:07:55,970 Again, you see the 200 pixels width here, 176 00:07:55,970 --> 00:07:58,113 but if you check the developer tools, 177 00:07:59,004 --> 00:08:00,927 you see that the margin now 178 00:08:00,927 --> 00:08:03,149 is added to create this two fraction, 179 00:08:03,149 --> 00:08:05,492 width in the end. For our purposes, still, 180 00:08:05,492 --> 00:08:07,800 we can simply say that we want to have 181 00:08:07,800 --> 00:08:10,090 one fraction for both the columns. 182 00:08:10,090 --> 00:08:12,370 So one fracture, one fraction with that, 183 00:08:12,370 --> 00:08:15,383 we have an even distribution between our columns, 184 00:08:17,680 --> 00:08:20,570 besides our template columns. 185 00:08:20,570 --> 00:08:23,390 We can also specify the gap, 186 00:08:23,390 --> 00:08:25,750 the distance between our elements 187 00:08:27,690 --> 00:08:28,523 at the moment. 188 00:08:28,523 --> 00:08:32,860 This is defined by the margin of our elements in here, 189 00:08:32,860 --> 00:08:34,919 but we can also define the space 190 00:08:34,919 --> 00:08:37,809 between the different, well, areas, 191 00:08:37,809 --> 00:08:40,700 the different elements inside our grid template 192 00:08:40,700 --> 00:08:43,400 with a specific property. 193 00:08:43,400 --> 00:08:48,400 This property, in our code here is called Gap. 194 00:08:48,410 --> 00:08:51,430 Gap is a shorthand and defines the gap 195 00:08:52,620 --> 00:08:56,490 between the front rows and front columns. 196 00:08:56,490 --> 00:08:59,920 In our case, we have four different roles here 197 00:08:59,920 --> 00:09:01,850 and two columns. 198 00:09:01,850 --> 00:09:04,360 This means, we could say that for the roles. 199 00:09:04,360 --> 00:09:08,733 We take a gap of 100 pixels between each of the rows, 200 00:09:10,030 --> 00:09:13,500 then a space and maybe 200 pixels 201 00:09:13,500 --> 00:09:15,800 as the gap between our two columns 202 00:09:17,080 --> 00:09:18,851 with this in place. 203 00:09:18,851 --> 00:09:20,950 You see that now the distance 204 00:09:20,950 --> 00:09:22,430 between our different elements 205 00:09:22,430 --> 00:09:24,790 increased significantly. 206 00:09:24,790 --> 00:09:27,630 And if we, again, hover over our grid, 207 00:09:27,630 --> 00:09:30,260 you see that the 208 00:09:30,260 --> 00:09:31,950 maybe right here, 209 00:09:31,950 --> 00:09:35,160 you see that the element area is this one here. 210 00:09:35,160 --> 00:09:37,630 So it's the content and the margin, 211 00:09:37,630 --> 00:09:39,374 but then these areas here, 212 00:09:39,374 --> 00:09:41,953 this is the gap between the columns. 213 00:09:41,953 --> 00:09:45,093 This is the gap between the rows. 214 00:09:46,000 --> 00:09:47,060 Okay! 215 00:09:47,060 --> 00:09:48,380 So it just looks a bit awkward, 216 00:09:48,380 --> 00:09:50,483 but we can keep it for this fury part. 217 00:09:51,660 --> 00:09:53,400 As I said, in this module, 218 00:09:53,400 --> 00:09:55,760 we'll just dive into great basics 219 00:09:55,760 --> 00:09:58,028 to be able to apply to our project, 220 00:09:58,028 --> 00:09:59,721 but to be able to do so 221 00:09:59,721 --> 00:10:02,122 one additional step is missing. 222 00:10:02,122 --> 00:10:05,480 We want to have this element, this card, 223 00:10:05,480 --> 00:10:08,128 which should occupy while the antivirus space, basically. 224 00:10:08,128 --> 00:10:10,911 So the first card here should be 225 00:10:10,911 --> 00:10:13,500 kind of using all the space 226 00:10:13,500 --> 00:10:15,445 without having this fourth card here. 227 00:10:15,445 --> 00:10:18,233 This is the next thing. We'll have a look at.