1
00:00:00,680 --> 00:00:04,580
In the last section we started to implement Gritz success on our list.

2
00:00:04,600 --> 00:00:06,390
We got everything laid out here.

3
00:00:06,400 --> 00:00:10,370
It definitely doesn't look great but at least they appear to be somewhat in a grid.

4
00:00:10,450 --> 00:00:15,670
Now in this video I want to start to focus on how we can somehow get these images to at least scrunch

5
00:00:15,670 --> 00:00:18,070
up against each other vertically.

6
00:00:18,190 --> 00:00:22,060
We'll eventually figure out how to get them closer together horizontally so like each of these different

7
00:00:22,060 --> 00:00:24,260
columns closer to get to each other.

8
00:00:24,280 --> 00:00:28,790
But right now how can we just get like this big white gap right here to go away.

9
00:00:29,080 --> 00:00:33,510
Well it turns out that doing this with great success alone is not very easy.

10
00:00:34,590 --> 00:00:39,210
There is one thing that we can kind of do to kind of approximate getting those things together but it's

11
00:00:39,210 --> 00:00:40,870
not a perfect solution.

12
00:00:40,890 --> 00:00:48,240
Back inside my image losea says file I'm going to add in a new rule here called GRID auto rose and I'm

13
00:00:48,240 --> 00:00:54,420
going to assign it a value of 200 pixels grid auto rows is going to essentially say how tall each of

14
00:00:54,420 --> 00:00:58,230
these different rosery to the different cells that you see are going to be.

15
00:00:58,230 --> 00:01:02,130
So when I save that we'll see that each of these different rows are going to shrink down in size quite

16
00:01:02,130 --> 00:01:02,940
a bit.

17
00:01:03,060 --> 00:01:06,220
And let's see if I put that in it correctly is try something else other than 200 pixels.

18
00:01:06,220 --> 00:01:08,100
Let's try like 150.

19
00:01:08,110 --> 00:01:09,390
That'll get us a better result.

20
00:01:09,390 --> 00:01:10,720
Yeah that's better right there.

21
00:01:11,010 --> 00:01:15,480
So we can very plainly see that each of those different cells have been essentially scrunched down quite

22
00:01:15,480 --> 00:01:16,310
a bit.

23
00:01:16,320 --> 00:01:20,020
Now this cell right here is only one hundred and fifty pixels tall.

24
00:01:20,070 --> 00:01:23,480
However many of our images are actually much larger than that.

25
00:01:23,480 --> 00:01:31,110
So like this image right here is way larger in height down to 150 pixels so it's spanning down underneath

26
00:01:31,110 --> 00:01:35,030
its assigned cell and it's being overwritten by the next image down.

27
00:01:35,370 --> 00:01:39,660
So this definitely solves the problem of getting images to somehow scrunched together vertically.

28
00:01:39,660 --> 00:01:45,390
But now we're running into an issue where each of them is kind of overriding the next cell down.

29
00:01:45,390 --> 00:01:52,320
So to fix this we've got a solution but it's really hard to implement in CSSA alone.

30
00:01:52,350 --> 00:01:54,340
Let me show you what we can do.

31
00:01:54,360 --> 00:02:01,270
I'm going to select just one of these images like this one right here that's definitely being overlapped.

32
00:02:01,440 --> 00:02:04,500
And then I'm going to add on a custom style to it.

33
00:02:04,620 --> 00:02:12,640
I'm going to put on a custom style here to just this element of grid Row End and I'm going to give it

34
00:02:12,670 --> 00:02:14,590
a value of span.

35
00:02:15,040 --> 00:02:16,440
Let's try like five.

36
00:02:16,490 --> 00:02:20,440
About two that's better or three that's even better.

37
00:02:20,440 --> 00:02:26,260
So essentially what this grid row end with span three right here does it says this cell in particular

38
00:02:26,320 --> 00:02:31,690
like this element needs to be allocated three cells worth of space.

39
00:02:31,690 --> 00:02:37,360
So if I now inspect you'll notice that this image has been given three cells to display itself and the

40
00:02:37,360 --> 00:02:41,110
next image is going to show on the next available spelt cell down.

41
00:02:41,110 --> 00:02:42,480
Or essentially the fourth cell.

42
00:02:42,480 --> 00:02:43,810
In this case.

43
00:02:43,810 --> 00:02:46,120
Now this definitely works to a degree.

44
00:02:46,210 --> 00:02:48,970
It's going to give us more space.

45
00:02:48,970 --> 00:02:54,670
However the problem is that this is a rule that we can only apply to essentially all of these images

46
00:02:54,730 --> 00:02:59,400
at the same time and each image is going to require a different spand value.

47
00:02:59,410 --> 00:03:06,250
Let me show you what I mean by that if I go back over to my CSSA file and I say that every image inside

48
00:03:06,250 --> 00:03:14,200
of year is going to get a grid row and a value of like span to all that's going to do is make sure that

49
00:03:14,260 --> 00:03:18,090
every single one of these images is now going to tick up to Spens.

50
00:03:18,160 --> 00:03:20,960
And we're back to the same problem we had before.

51
00:03:21,890 --> 00:03:25,490
We're a really short image is going to have a big white gap underneath it.

52
00:03:25,730 --> 00:03:31,760
So what it kind of feels like is for every individual image we need to determine the height of the image

53
00:03:32,090 --> 00:03:37,500
and then based upon its height we can then decide on how many spans it should be allocated.

54
00:03:37,850 --> 00:03:39,910
And that's exactly what we're going to do.

55
00:03:39,950 --> 00:03:45,320
We're going to use this grid Row End thing right here along with playing around a little bit with the

56
00:03:45,350 --> 00:03:45,700
grid.

57
00:03:45,710 --> 00:03:51,850
Auto rows to somehow make sure that image right here only gets just as much space as it needs.

58
00:03:51,860 --> 00:03:57,630
But then the next one over it gets way more to it to adjust for its much larger Heights.

59
00:03:57,980 --> 00:04:03,620
Now this is something that can not be solved with CSSA alone because we are talking about applying some

60
00:04:03,830 --> 00:04:07,640
styling here based upon the content of this image.

61
00:04:07,730 --> 00:04:10,690
So we're going to actually have to write some javascript to do this.

62
00:04:10,700 --> 00:04:13,410
Now this is where re-act starts to come into play.

63
00:04:13,580 --> 00:04:15,080
So let's take a quick pause right here.

64
00:04:15,110 --> 00:04:19,190
When we come back the next section will talk about how we're going to approach this problem with re-act.