1
00:00:00,570 --> 00:00:03,280
We've now got our list of images to display successfully.

2
00:00:03,330 --> 00:00:06,510
But the images are really really large.

3
00:00:06,510 --> 00:00:10,500
So in this section we're going to start working on this V-2 implementation of this app.

4
00:00:10,500 --> 00:00:15,150
It's going to require us to refactor a couple of different things with the ultimate goal of showing

5
00:00:15,240 --> 00:00:19,630
reasonably sized images that kind of tile together really nicely.

6
00:00:19,710 --> 00:00:23,670
I'm going to tell you right now the first half of this work is going to involve just a little bit of

7
00:00:23,670 --> 00:00:26,950
success which I know is completely off topic from react.

8
00:00:27,080 --> 00:00:31,680
Well we're going to very quickly realize that CSSA is only going to take us so far and we're going to

9
00:00:31,680 --> 00:00:36,720
have to learn about a new re-act feature in order to really build something that looks like this right

10
00:00:36,720 --> 00:00:37,360
here.

11
00:00:37,410 --> 00:00:38,910
So let's get to it.

12
00:00:38,940 --> 00:00:44,040
The first one to tell you about is the system that we're going to use to lay out these images and it's

13
00:00:44,040 --> 00:00:46,190
going to get us only about halfway there.

14
00:00:46,200 --> 00:00:48,690
It's called The Grid CSSA system.

15
00:00:48,690 --> 00:00:55,590
So it with the great CSSA system we find some element inside of our of our Dom hierarchy or component

16
00:00:55,590 --> 00:00:56,070
hierarchy.

17
00:00:56,070 --> 00:01:03,180
In our case and we'll give it a style of display grid then every image or every element underneath that

18
00:01:03,180 --> 00:01:06,170
div is going to be laid out in a grid fashion.

19
00:01:06,180 --> 00:01:10,590
Now I was kind of in a nutshell but there's a lot of other things going on here.

20
00:01:10,770 --> 00:01:15,180
In order to really get a understanding of what's going on the best thing to do is add in a little bit

21
00:01:15,180 --> 00:01:19,510
of success to implement this grid system and then just kind of see what happens.

22
00:01:19,680 --> 00:01:25,550
So with that in mind I'm going to flip on over to my editor and in sudden my component's directory I'm

23
00:01:25,550 --> 00:01:29,170
going to make a new file called image list.

24
00:01:29,320 --> 00:01:30,360
CSX.

25
00:01:30,470 --> 00:01:35,030
So we're going to write a couple of rules inside of your to customize the images that are displayed

26
00:01:35,030 --> 00:01:39,010
by the image list component at the top of image list.

27
00:01:39,010 --> 00:01:42,160
I'm going to add in a import statement for that CSSA file.

28
00:01:44,070 --> 00:01:49,440
And then I'm also going to make sure that I am in a class name of image list to that div right there.

29
00:01:49,440 --> 00:01:53,300
I added it in between the last section and this one my mistake.

30
00:01:53,340 --> 00:01:54,330
It was not there before.

31
00:01:54,330 --> 00:01:55,380
Let's just put it in right now.

32
00:01:55,380 --> 00:01:57,330
Pretend like I just put it in for the first time.

33
00:01:57,330 --> 00:01:57,950
There we go.

34
00:01:58,670 --> 00:01:58,920
OK.

35
00:01:58,940 --> 00:02:06,050
So now back inside of Emmett's list I'll add in a selector for image Dasch list and I'm going to put

36
00:02:06,070 --> 00:02:09,990
2 rules inside of your and you'll very quickly see what they do on the screen.

37
00:02:10,100 --> 00:02:18,500
I'm going to say display grid and then I will also give this grid template columns with repeat auto

38
00:02:18,530 --> 00:02:26,030
fill and then as a second argument I'll say min max 250 pixels and one FBAR.

39
00:02:26,060 --> 00:02:32,390
And that's kind of a very long rule sullenly So that entire line.

40
00:02:32,400 --> 00:02:36,050
All right so we'll definitely discuss exactly what that is doing in just a second.

41
00:02:36,070 --> 00:02:43,280
First let's put one more rule inside if you're going to say image Oh come on image list.

42
00:02:43,280 --> 00:02:44,590
There we go.

43
00:02:44,840 --> 00:02:49,440
I want to get my image and I'm going to give this thing a width of 250 pixels.

44
00:02:49,460 --> 00:02:53,530
So now all of our images are going to be at most 250 pixels.

45
00:02:53,570 --> 00:02:53,790
All right.

46
00:02:53,780 --> 00:02:54,740
So let's now save this.

47
00:02:54,740 --> 00:03:00,440
And we'll see what happens inside the browser All right I'm going to do a quick search year for cars

48
00:03:00,440 --> 00:03:01,150
again.

49
00:03:01,280 --> 00:03:05,770
Now you'll notice that we have our images being laid out in a grid of sorts.

50
00:03:05,780 --> 00:03:11,500
Now they're not very well fit together certainly not how we kind of originally envisioned it over here.

51
00:03:11,690 --> 00:03:15,950
So like I said we're going to have to definitely do a little bit of work on the rock side of things

52
00:03:16,130 --> 00:03:18,400
to get these things to fit together very nicely.

53
00:03:18,410 --> 00:03:23,260
But first let me tell you a little bit more about the grid system inside of my chrome console.

54
00:03:23,260 --> 00:03:27,320
I'm going to go to the elements tab and then click on this little arrow right here that will allow me

55
00:03:27,320 --> 00:03:32,930
to inspect all these elements then will hover and you'll very quickly start to see these little dotted

56
00:03:32,930 --> 00:03:34,090
lines appear.

57
00:03:34,310 --> 00:03:39,770
So each of these dotted lines that you see appear are essentially one of these different grid slots

58
00:03:39,950 --> 00:03:41,580
that are going to show up.

59
00:03:41,600 --> 00:03:47,120
So the great CSSA system is going to create that grid and then take each of our elements and shove those

60
00:03:47,150 --> 00:03:51,090
elements elements into a different spot within that grid.

61
00:03:51,110 --> 00:03:56,960
So right here we see the space allocated for the first image and then over here is the space allocated

62
00:03:56,990 --> 00:04:01,940
in this dotted line box that you see for the second image and same thing down here in down here and

63
00:04:01,940 --> 00:04:02,530
so on.

64
00:04:04,060 --> 00:04:08,230
Now I want to show you a couple of different rules that we can play around with to adjust how these

65
00:04:08,230 --> 00:04:10,900
different images are laid out inside of here.

66
00:04:10,900 --> 00:04:16,300
First off I want you to notice that each image is kind of shoved up directly against each other which

67
00:04:16,300 --> 00:04:18,120
doesn't look too nice.

68
00:04:18,130 --> 00:04:22,840
So in order to make sure that there's a little bit of standoff between those images we can add in an

69
00:04:22,900 --> 00:04:28,470
additional rule of grid ash gap 10 pixels like so.

70
00:04:28,730 --> 00:04:35,140
So that's going to make sure that each of these different cells have a 10 pixel load spacing between

71
00:04:35,140 --> 00:04:39,380
them on both the sides and in between top and bottom.

72
00:04:39,430 --> 00:04:41,000
Let me save that CSSA file.

73
00:04:41,020 --> 00:04:44,550
And if I flip back over I'll see that I now get a little bit of separation in there.

74
00:04:44,560 --> 00:04:48,830
Now when you do that inspect Now you can really start to see those cells come together.

75
00:04:50,610 --> 00:04:50,840
All right.

76
00:04:50,840 --> 00:04:54,380
So next on Tell you a little more about the grid template columns rule.

77
00:04:54,630 --> 00:05:01,080
Essentially what this does is it creates a set number of columns autofill right here means that the

78
00:05:01,080 --> 00:05:07,360
CSSA roll or the grid CSSA system is going to automatically decide how many columns to insert on each

79
00:05:07,360 --> 00:05:07,590
year.

80
00:05:07,590 --> 00:05:13,940
So in this case it decided to put in two and then the second argument right here minimax 250 pixels

81
00:05:13,940 --> 00:05:20,690
one FFR means that each one of those different columns is going to be at minimum 250 pixels wide and

82
00:05:20,690 --> 00:05:25,280
then at most and this one's a little bit challenging to understand one as far as space.

83
00:05:25,340 --> 00:05:32,210
Basically a maximum allocation of space one for in this context means that for every column that we

84
00:05:32,220 --> 00:05:36,240
creates We want them to all be equally sized.

85
00:05:36,260 --> 00:05:40,470
So in this case it's kind of challenging to communicate exactly what one does.

86
00:05:40,490 --> 00:05:46,010
Essentially if we had multiple columns being created and we were manually creating each one we could

87
00:05:46,010 --> 00:05:51,170
assign a different value to them and then some different color or some of those columns might have a

88
00:05:51,170 --> 00:05:55,540
greater or smaller width assigned to them automatically.

89
00:05:55,550 --> 00:06:00,140
All right now adding in that column thing definitely looks like it improved things.

90
00:06:00,140 --> 00:06:04,610
You know we got a little bit of standoff here but remember the original idea was to make sure that we've

91
00:06:04,610 --> 00:06:09,190
got this like really nice kind of closely fitted set of images.

92
00:06:09,350 --> 00:06:10,940
So let's take a quick pause right here.

93
00:06:10,970 --> 00:06:15,050
When we come back the next section we're going to do a little bit more work on this grid system and

94
00:06:15,050 --> 00:06:18,890
see if we can't get these things to fit together a little bit more nicely than they currently are.