1 00:00:01,540 --> 00:00:02,170 Welcome back. 2 00:00:02,410 --> 00:00:07,070 Now that we've gotten used to the CSFs grid system, let's introduce a few more properties. 3 00:00:07,780 --> 00:00:09,930 Now, another thing we can do with CSFs. 4 00:00:09,940 --> 00:00:12,610 Great, because remember, I said it was two dimensional. 5 00:00:12,610 --> 00:00:15,200 That is, we can control the rose as well. 6 00:00:15,940 --> 00:00:18,790 So far, this is something that Xbox can do as well. 7 00:00:19,330 --> 00:00:29,080 We can do something like grid template rows now and actually define the way the rows should as well. 8 00:00:30,480 --> 00:00:36,010 So let's say I want to do one far too far. 9 00:00:36,990 --> 00:00:37,950 What do you think will happen? 10 00:00:38,520 --> 00:00:38,960 Let's see. 11 00:00:39,430 --> 00:00:41,280 Going to save and refresh. 12 00:00:44,720 --> 00:00:56,270 The first row has is one F.R., but the second row is twice as big as the first one as we can see here, 13 00:00:57,050 --> 00:01:06,860 and because of the way it works in the third row, because we haven't really added a third column automatically 14 00:01:06,860 --> 00:01:08,240 if there's more items. 15 00:01:09,670 --> 00:01:18,070 It's going to just start repeating, so the next row, which is the third row, will have one F.R. So 16 00:01:18,070 --> 00:01:19,540 I can define different things here. 17 00:01:19,540 --> 00:01:28,300 I can say three, four for the third row and let's say five F.R. for the last row, if I refresh and 18 00:01:28,300 --> 00:01:28,960 safe here. 19 00:01:30,340 --> 00:01:31,940 If I save and refresh your. 20 00:01:32,980 --> 00:01:37,480 We see that we have our new columns or rose. 21 00:01:38,840 --> 00:01:45,110 But that looks ugly, so let's just keep it at one half hour, which is the default. 22 00:01:46,560 --> 00:01:50,790 Now, another thing that we can do and that you'll see a lot of is. 23 00:01:51,780 --> 00:01:57,630 The repeat function that we can add to something like grid template columns. 24 00:01:58,790 --> 00:02:03,530 So instead of doing this over here, I can say repeat. 25 00:02:05,300 --> 00:02:13,760 Brackets and now I say, how many times I want to repeat something, so the first number is how many 26 00:02:13,760 --> 00:02:14,070 times? 27 00:02:14,070 --> 00:02:18,290 So let's say three times repeat one F r. 28 00:02:19,280 --> 00:02:23,750 So that's like saying one four one four one four, three times. 29 00:02:24,750 --> 00:02:26,880 If I save this and refresh. 30 00:02:28,340 --> 00:02:37,040 I get one, two, three, if I do four here and I refresh, I get four and you can imagine what happens 31 00:02:37,040 --> 00:02:40,040 if we do six, we just keep repeating things. 32 00:02:43,100 --> 00:02:51,020 Another thing that we can do is the auto property and the auto property just simply means. 33 00:02:52,310 --> 00:02:55,040 Fill in whatever available space we have. 34 00:02:55,820 --> 00:03:03,890 So if I do something like auto one far too far and I refresh here, you'll notice that. 35 00:03:04,980 --> 00:03:13,530 The first column doesn't really have any spaces outside of the emoji and auto can also be thought of 36 00:03:13,530 --> 00:03:16,100 as the max size of the content. 37 00:03:16,530 --> 00:03:23,160 If I make this fox, let's say, have a content of two and I refresh. 38 00:03:24,300 --> 00:03:33,180 You'll see that the auto property automatically resized to fit the content, and because this entire 39 00:03:33,180 --> 00:03:38,960 layout is on a grid system, it will make sure that the ones below it will have the same size. 40 00:03:39,630 --> 00:03:42,810 If I do one favor here and I refresh. 41 00:03:44,050 --> 00:03:46,960 You'll see the difference of what we're talking about. 42 00:03:47,230 --> 00:03:51,750 It's not automatically scaling this first grid. 43 00:03:51,910 --> 00:03:59,080 Instead, it's going to keep the proportions that we have and extend anything below it that doesn't 44 00:03:59,080 --> 00:03:59,410 fit. 45 00:04:00,630 --> 00:04:04,890 So Otto is another really, really good feature to use. 46 00:04:11,060 --> 00:04:13,880 All right, let's tackle a few more properties in the next video.