1
00:00:01,460 --> 00:00:07,970
Another property that is very important when it comes to CSFs grid is justify.

2
00:00:11,200 --> 00:00:16,780
And justify items and the default is right now stretch.

3
00:00:17,850 --> 00:00:23,010
So that if I refresh this, nothing's going to change, but if I do start.

4
00:00:24,020 --> 00:00:31,130
And refresh it aligns the contents in a great item along what we call the Roe axis.

5
00:00:31,740 --> 00:00:34,760
So the Roe axis is each Roe.

6
00:00:35,570 --> 00:00:36,170
I do.

7
00:00:36,200 --> 00:00:38,000
And and I refresh.

8
00:00:39,270 --> 00:00:41,970
We see that they're now towards the end.

9
00:00:43,000 --> 00:00:52,210
But a better way to visualize this is to actually use our developer tools, so if I go to view developer

10
00:00:52,900 --> 00:00:55,780
developer tools and we select our grid.

11
00:00:57,510 --> 00:01:03,780
You see that by clicking on this pointy icon and hovering over it in Google Chrome, we actually see

12
00:01:03,780 --> 00:01:09,150
our grid system and if I scroll, you see that it actually stays in place.

13
00:01:10,700 --> 00:01:20,270
But you see that we now have our items at the end of our grid system, our last item, which is too

14
00:01:20,280 --> 00:01:27,980
far right over here, is justified to the end, our second column.

15
00:01:28,980 --> 00:01:34,830
Is justified to the end when we see a bit of a gap here, and that is because remember, we have a one

16
00:01:34,830 --> 00:01:44,010
F.R. and then the first item because it's auto and the size is according to its content, doesn't really

17
00:01:44,010 --> 00:01:46,740
move whether we have and or start here.

18
00:01:47,100 --> 00:01:51,840
It's already within the maxed space of the grid system.

19
00:01:52,560 --> 00:01:58,500
And just like we have the axis around the row, if I change this to a line items.

20
00:02:00,270 --> 00:02:02,070
And I save and refresh.

21
00:02:03,770 --> 00:02:10,040
This one's hard to see, so let's just do five or three hundred pixels and refresher.

22
00:02:11,320 --> 00:02:18,400
We see that a line item is the exact opposite, where it's around a column axis.

23
00:02:19,750 --> 00:02:26,020
And we can use start end here to move those red boxes around.

24
00:02:27,060 --> 00:02:32,190
But most of the time, we want this filled and we don't want to move items around, so I don't really

25
00:02:32,190 --> 00:02:34,170
like using those two properties.

26
00:02:34,890 --> 00:02:37,170
So let's fix that to one of our.

27
00:02:38,590 --> 00:02:41,380
If I refresh, all right, we have things back to normal.

28
00:02:41,640 --> 00:02:42,550
I'm going to close this.

29
00:02:44,010 --> 00:02:50,280
Now, the last thing I want to show you inside of this container is my preferred method of actually

30
00:02:50,280 --> 00:02:53,280
creating a grid layout and any website that I built.

31
00:02:54,060 --> 00:02:58,790
And what I usually like to do is something new that we haven't seen before.

32
00:02:59,220 --> 00:03:03,900
I usually do repeat and define here how many rows I want.

33
00:03:03,910 --> 00:03:10,320
Let's say I want three at one F.R. So I want everything to have the same size.

34
00:03:11,190 --> 00:03:13,170
But there's a problem here, right?

35
00:03:14,100 --> 00:03:17,250
Because right now this is stretching.

36
00:03:17,580 --> 00:03:27,600
But as soon as we make it too small or too big, it's just it's not extremely responsive or it's not

37
00:03:27,600 --> 00:03:28,850
100 percent responsive.

38
00:03:29,160 --> 00:03:33,540
So instead, I like using auto fill.

39
00:03:34,900 --> 00:03:39,820
And in Autofill, just to show you what it does, if I do something like three hundred pixels and I

40
00:03:39,820 --> 00:03:40,480
refresh.

41
00:03:43,350 --> 00:03:52,470
And now I change the sizing, you'll see that our grid system or the column system adjusts audiophiles

42
00:03:52,770 --> 00:03:58,970
according to the size of our viewport, which is really, really nice.

43
00:03:59,700 --> 00:04:02,660
But right now, I just said three hundred pixels.

44
00:04:03,240 --> 00:04:05,850
So, again, it's not super, super responsive.

45
00:04:06,910 --> 00:04:10,690
So instead, we can use something else called the men Max.

46
00:04:12,710 --> 00:04:19,100
And I know this can look confusing, but if you remember this pattern, this is the most common pattern,

47
00:04:19,100 --> 00:04:22,210
I would say, to use when it comes to Scribd.

48
00:04:22,580 --> 00:04:25,910
So once you get used to this, you can just copy and paste it and use it everywhere.

49
00:04:26,600 --> 00:04:32,960
And here what we want to do is say, well, the minimum that we want the size of our columns to be,

50
00:04:33,350 --> 00:04:36,940
let's say I want the minimum to be two hundred pixels.

51
00:04:36,950 --> 00:04:37,980
So that's the smallest.

52
00:04:37,980 --> 00:04:40,300
That's going to get the max, though.

53
00:04:40,310 --> 00:04:42,580
How big do we want these to get?

54
00:04:43,070 --> 00:04:44,680
And this is a common thing.

55
00:04:44,720 --> 00:04:46,260
What do we want as the biggest.

56
00:04:46,400 --> 00:04:48,230
Well, just one F r.

57
00:04:49,200 --> 00:04:56,160
Because as we all see, by doing this, you'll automatically adjust to the size of the viewport.

58
00:04:56,580 --> 00:04:59,490
Let me just save and show you what I mean by refresh here.

59
00:05:00,030 --> 00:05:01,620
I see I have three here.

60
00:05:01,620 --> 00:05:05,850
It auto adjusts, auto adjust based on our size.

61
00:05:07,090 --> 00:05:14,440
But you also see that the container itself is also adjusting in size so that if I go smaller and smaller

62
00:05:14,440 --> 00:05:15,310
and smaller.

63
00:05:18,890 --> 00:05:23,660
As soon as we hit the 200 pixel minimum.

64
00:05:24,720 --> 00:05:29,850
It adjusts and because we said one as far as the max.

65
00:05:30,920 --> 00:05:36,110
As soon as the viewport is really, really small and goes below 200 pixels.

66
00:05:37,110 --> 00:05:43,470
It's going to just take up one fraction, and in our case, it will be the entire screen.

67
00:05:44,510 --> 00:05:53,990
So using this syntax of repeat autofill min max, giving it a minimum, we're able to make this completely

68
00:05:54,110 --> 00:05:54,970
responsive.

69
00:05:55,520 --> 00:05:58,310
And as you can see here, it's pretty powerful, right?

70
00:06:01,390 --> 00:06:05,980
In just a few lines of code, we've made this grid system that is completely responsive.

71
00:06:07,460 --> 00:06:13,470
All right, up to this point, we've just focused on the container, but what about the individual items?

72
00:06:13,970 --> 00:06:20,420
What if we want something that's maybe bigger than the other item and we don't want them all symmetrical

73
00:06:20,420 --> 00:06:20,920
like this?

74
00:06:21,650 --> 00:06:22,370
What would we do?

75
00:06:22,970 --> 00:06:24,590
Let's find out in the next video.