1 00:00:00,300 --> 00:00:07,320 Next up, let's learn about justify content, so sometimes the total size of your grid might be less 2 00:00:07,530 --> 00:00:09,180 than the size of the grid container. 3 00:00:10,580 --> 00:00:17,030 This could happen if all of your great items are sized with non flexible units like pixels, for example. 4 00:00:18,160 --> 00:00:24,910 In this case, in this case, you can set the alignment of the grid within the grid container and this 5 00:00:24,910 --> 00:00:32,980 property will align the grid along the inland road access as opposed to allowing content which aligns 6 00:00:32,980 --> 00:00:35,440 the grid along the block column axis. 7 00:00:35,860 --> 00:00:40,030 So let's take a look at this now for some of type in a comment. 8 00:00:42,930 --> 00:00:44,400 Of justify content. 9 00:00:50,550 --> 00:00:55,800 And let's get started by let's take a to go so great container. 10 00:00:57,120 --> 00:00:59,310 I'm going to comment this out. 11 00:01:01,090 --> 00:01:03,490 Now, first, we will displayed as grid. 12 00:01:08,820 --> 00:01:16,860 And now we're tapping gratingly column repeat and as I said, we need to have non flexible. 13 00:01:18,240 --> 00:01:26,610 Units, so instead of typing in one eye far or percentages, we will have 150 pixels. 14 00:01:28,170 --> 00:01:29,210 OK, so let's take a look. 15 00:01:29,220 --> 00:01:34,440 We have here our entire container, so the black background and we also have our items. 16 00:01:34,440 --> 00:01:40,920 And you can see they're not stretching to the edge of the container because each of them has only 150 17 00:01:40,920 --> 00:01:41,400 pixels. 18 00:01:41,760 --> 00:01:44,580 Now, let's just apply the content with start. 19 00:01:46,700 --> 00:01:53,870 Which will align the grid to the flush with the start edge of the container and that it's safe. 20 00:01:53,900 --> 00:01:54,620 Yep, I did. 21 00:01:55,140 --> 00:02:01,520 OK, now let's try and let me scroll down a bit to justify content and. 22 00:02:02,540 --> 00:02:06,960 And this will push me to the edge of the great container, OK? 23 00:02:06,980 --> 00:02:11,030 Next stop will have center justified content. 24 00:02:14,480 --> 00:02:17,310 And center, and there we go. 25 00:02:17,360 --> 00:02:19,220 He is now in the center of the container. 26 00:02:21,010 --> 00:02:22,150 And, of course, Stretch. 27 00:02:26,470 --> 00:02:31,720 Now, start stretch like this will stretch out our items. 28 00:02:32,890 --> 00:02:38,790 Up next, we have a few things you didn't see until now, and that will be space around space between 29 00:02:38,800 --> 00:02:39,630 a space even. 30 00:02:40,030 --> 00:02:46,450 So let's, first of all, justify the content with space around now. 31 00:02:47,540 --> 00:02:55,370 This will place an even amount of space between each grid item with the half sized space on the far 32 00:02:55,760 --> 00:02:56,320 ends. 33 00:02:56,810 --> 00:02:58,160 So let's see how this looks. 34 00:02:58,160 --> 00:03:00,760 And I say the click save. 35 00:03:01,130 --> 00:03:01,970 Yeah, there it is. 36 00:03:03,030 --> 00:03:11,010 So this puts space around the elements evenly between the elements and evenly to the edges. 37 00:03:11,910 --> 00:03:13,500 Next up, we have space. 38 00:03:14,520 --> 00:03:24,690 Between which would place even amount of space between each item with no space at the far end of the 39 00:03:24,690 --> 00:03:25,890 containers, let it save. 40 00:03:26,400 --> 00:03:33,090 And you can see we have no space at the far edges, but only equal spaces between the items. 41 00:03:33,540 --> 00:03:38,250 And last but not least, we have just content with space evenly. 42 00:03:39,690 --> 00:03:46,350 Not this one will place an even amount of space between each grid item, including the far ends of the 43 00:03:46,350 --> 00:03:46,890 container. 44 00:03:47,190 --> 00:03:53,130 I can see the spaces not only between the items, but also between the edges are equal. 45 00:03:54,780 --> 00:03:57,000 OK, so this basically it would justify content.