1
00:00:02,400 --> 00:00:04,500
Let's move on to the project grid.

2
00:00:05,620 --> 00:00:12,670
Something that we see a lot of in websites, whether it's an image gallery or a list of your portfolio

3
00:00:12,670 --> 00:00:16,980
projects, grid systems are very important and very common.

4
00:00:17,500 --> 00:00:23,340
And as we know, we learned the perfect way to create a grid success grid.

5
00:00:23,350 --> 00:00:23,610
Right.

6
00:00:24,660 --> 00:00:28,080
So let's see how this would look like and my ideal implementation.

7
00:00:29,100 --> 00:00:31,140
First, I want to go to the e-mail page.

8
00:00:32,750 --> 00:00:35,150
And now let's make this a little bit bigger.

9
00:00:36,960 --> 00:00:44,790
In our Project Grid div, I know I want to use CSFs Grid, so I'm going to create a wrapper around this

10
00:00:44,790 --> 00:00:45,420
project grid.

11
00:00:46,750 --> 00:00:48,790
So I'm going to have a div.

12
00:00:52,280 --> 00:00:59,510
And this debate will have a class of some properties that will access to you and just to keep things

13
00:00:59,510 --> 00:01:00,570
blue the way they are.

14
00:01:00,590 --> 00:01:06,620
I'm going to give it that zone blue class that we have below, but we're going to make it access grid.

15
00:01:06,620 --> 00:01:08,090
So I'm going to just say grid.

16
00:01:11,110 --> 00:01:14,440
And we can just remove the project grid.

17
00:01:15,880 --> 00:01:23,890
And in here, add a couple of sample little projects, if you remember in our solution file, I left

18
00:01:23,890 --> 00:01:26,860
for you a couple of images that you can just add.

19
00:01:28,220 --> 00:01:31,010
Like this, so that we have some sort of a project grid.

20
00:01:32,920 --> 00:01:37,300
I'm not going to bore you with me typing all that out, because that's something that we've done before,

21
00:01:37,690 --> 00:01:45,580
just going to copy and paste a diff here with Box Zohn boxes, a class that we haven't added yet.

22
00:01:45,580 --> 00:01:48,940
But we're going to create these are going to be the great items.

23
00:01:50,360 --> 00:01:56,090
We have zone, which, again, something that we've already defined before, and our images, that's

24
00:01:56,090 --> 00:01:56,210
it.

25
00:01:57,520 --> 00:01:59,500
So if I save this and refresh.

26
00:02:00,610 --> 00:02:05,230
And let's refresh again, all right, this is absolutely hideous.

27
00:02:06,470 --> 00:02:11,960
Does not look pretty at all, but at least we have the images provided, but no employer is going to

28
00:02:11,960 --> 00:02:13,350
be impressed if they see this right.

29
00:02:13,910 --> 00:02:16,570
So let's actually make this into a grid system.

30
00:02:18,320 --> 00:02:21,590
If we go back to the style to let's add our.

31
00:02:23,000 --> 00:02:23,750
Grid here.

32
00:02:25,620 --> 00:02:32,130
And obviously, as the name suggests, when it comes to grades, success grades is the way to go and

33
00:02:32,130 --> 00:02:34,080
there's many ways that we can lay things out.

34
00:02:34,090 --> 00:02:37,410
And it's something that we've already talked about in our sixth grade videos.

35
00:02:37,950 --> 00:02:39,530
So we're going to keep things simple.

36
00:02:40,410 --> 00:02:44,640
First is, we want to actually say, hey, we're going to use the script.

37
00:02:44,850 --> 00:02:52,680
So we're going to use the grid wrapper class that we created, which was this div that wraps all our

38
00:02:52,680 --> 00:02:53,370
projects.

39
00:02:55,640 --> 00:03:01,280
And we'll say display grid, we'll say that we want the grid gap.

40
00:03:02,200 --> 00:03:03,850
To be 20 pixels.

41
00:03:05,610 --> 00:03:13,500
And then finally, the our favorite property, that is grid template columns.

42
00:03:14,660 --> 00:03:18,110
And so everything is responsive, we'll say repeat.

43
00:03:22,730 --> 00:03:25,010
And we'll say that the min max.

44
00:03:26,670 --> 00:03:33,180
We'll be, let's say, three hundred and fifty pixels, so that is the minimum and the maximum will

45
00:03:33,180 --> 00:03:37,950
be one F.R. so that it fills the entire page when it's really, really small.

46
00:03:39,640 --> 00:03:42,490
So that if I say this and refresh.

47
00:03:44,750 --> 00:03:47,880
Right, that still looks pretty hideous, doesn't it?

48
00:03:48,080 --> 00:03:53,510
And that's because our images are, well, they're pretty massive and you see that they're also not

49
00:03:53,510 --> 00:03:55,810
all the same size or they have different padding.

50
00:03:56,660 --> 00:04:01,700
So the way to just fix that quickly and something that you'll see a lot with images.

51
00:04:02,950 --> 00:04:05,770
Is to give them a width of one hundred percent.

52
00:04:06,850 --> 00:04:15,010
In our case that we can just say box, because, remember, each div has a box class that we haven't

53
00:04:15,010 --> 00:04:17,490
really said anything about and then an image.

54
00:04:17,980 --> 00:04:24,640
So using our success selector knowledge, I can just say all children of box that are images.

55
00:04:28,610 --> 00:04:31,940
To be one hundred percent save and refresh.

56
00:04:34,560 --> 00:04:35,750
Right, that's perfect.

57
00:04:35,770 --> 00:04:42,370
Now you see that each image has one hundred percent with that is it fills in the entire piece of the

58
00:04:42,370 --> 00:04:42,700
card.

59
00:04:43,620 --> 00:04:47,940
And if I make this bigger and smaller, you see that it adjusts.

60
00:04:50,390 --> 00:04:52,820
Very, very cool, but still pretty ugly.

61
00:04:54,290 --> 00:05:00,740
But we have the sixth grade working, as you can see, as soon as it's less than 350 pixels.

62
00:05:02,300 --> 00:05:03,800
It changes the grid system.

63
00:05:06,770 --> 00:05:12,170
So next, we want to work on the individual cards, that is, we want to have our box.

64
00:05:13,630 --> 00:05:18,110
And here, we don't really need to add any extra grid properties.

65
00:05:18,130 --> 00:05:21,010
I mean, we could if we want, but I like the way things look.

66
00:05:21,010 --> 00:05:22,540
I like everything being symmetrical.

67
00:05:22,540 --> 00:05:25,430
I want to all the items in the grid to be the same.

68
00:05:26,290 --> 00:05:33,880
So in here, we can just add our simple access properties like, let's say background color.

69
00:05:35,850 --> 00:05:44,130
And we'll just give it a color of, let's say for four for so that we have this dark color and we definitely

70
00:05:44,130 --> 00:05:46,250
don't want these images to be this big.

71
00:05:47,160 --> 00:05:55,200
So we'll give it a padding of one hundred and thirty pixels and maybe some margin as well of 20 pixels

72
00:05:55,830 --> 00:05:57,210
by save and refresh.

73
00:05:58,230 --> 00:06:04,410
That's a lot better and remember, because we said that the width of the image is one hundred percent,

74
00:06:05,220 --> 00:06:07,970
it's going to try and fill the entire box.

75
00:06:07,980 --> 00:06:14,310
But because the box now has padding of one 30, both of the top, the bottom and to the left and right,

76
00:06:15,120 --> 00:06:17,820
the width is now just this part.

77
00:06:18,030 --> 00:06:19,130
So that looks a lot better.

78
00:06:20,490 --> 00:06:24,540
And if we look over here, we now have a completely.

79
00:06:25,850 --> 00:06:26,810
Responsive.

80
00:06:29,420 --> 00:06:34,550
Grid system, how cool is that and how simple was that using CSFs Grid?

81
00:06:35,450 --> 00:06:39,800
Luckily for us, the last thing we need to do is this footer.

82
00:06:40,280 --> 00:06:44,390
And because the footer is at the very bottom, it just going to stay at the very bottom.

83
00:06:44,800 --> 00:06:49,340
The only thing that we might want to do is to make sure that the text is centered.

84
00:06:49,940 --> 00:06:51,740
So in our case, we can just say footer.

85
00:06:53,080 --> 00:07:01,660
And as you guessed, yes, it's text line, our best friend center, if I refresh and make sure that

86
00:07:01,660 --> 00:07:04,880
I spell properly, if I save and refresh.

87
00:07:05,440 --> 00:07:12,250
Well, that's not going to work because we should change our footer, which is d'Hiv, to more of a

88
00:07:12,250 --> 00:07:15,340
semantic HTML tag of footer.

89
00:07:17,140 --> 00:07:22,280
Now, if I save and refresh, this is in the center, it looks great.

90
00:07:22,390 --> 00:07:29,620
Let's say zero to mastery because our layout is looking really nice.

91
00:07:32,970 --> 00:07:36,630
And there you have it, that wasn't that bad, was it?

92
00:07:38,160 --> 00:07:45,540
I mean, sure, the first time around, that's kind of difficult, but the principles that I've showed

93
00:07:45,540 --> 00:07:49,380
you here can be transferred to a lot of websites.

94
00:07:49,830 --> 00:07:51,540
I mean, this looks pretty ugly.

95
00:07:52,030 --> 00:07:54,900
You're not going to want to visit a website that looks like this.

96
00:07:55,410 --> 00:08:00,180
But when it comes to layout, everything is responsive and nice.

97
00:08:00,630 --> 00:08:00,970
Right.

98
00:08:01,230 --> 00:08:05,790
And you can imagine yourself expanding on this and building a beautiful website.

99
00:08:07,330 --> 00:08:13,110
I wanted to show you this layout system, because this is what I would use if I was building a website,

100
00:08:13,570 --> 00:08:21,040
I would start off with the HTML and create the layout that is responsive, because after this, all

101
00:08:21,040 --> 00:08:28,330
I really need to do is add text images and colors, maybe some styles to make it pretty so that you

102
00:08:28,330 --> 00:08:31,720
can turn something like this that doesn't look good.

103
00:08:31,720 --> 00:08:39,070
But has the layout implemented into something like this, which I mean doesn't look that great yet.

104
00:08:39,430 --> 00:08:46,540
But in the next video, I want to show you how, because we have the layout setup, we can convert our

105
00:08:46,780 --> 00:08:50,980
base layout project into something like this and less than five minutes.

106
00:08:51,640 --> 00:08:53,190
So let's do that in the next video.