In the last section we started to implement Gritz success on our list.
We got everything laid out here.
It definitely doesn't look great but at least they appear to be somewhat in a grid.
Now in this video I want to start to focus on how we can somehow get these images to at least scrunch
up against each other vertically.
We'll eventually figure out how to get them closer together horizontally so like each of these different
columns closer to get to each other.
But right now how can we just get like this big white gap right here to go away.
Well it turns out that doing this with great success alone is not very easy.
There is one thing that we can kind of do to kind of approximate getting those things together but it's
not a perfect solution.
Back inside my image losea says file I'm going to add in a new rule here called GRID auto rose and I'm
going to assign it a value of 200 pixels grid auto rows is going to essentially say how tall each of
these different rosery to the different cells that you see are going to be.
So when I save that we'll see that each of these different rows are going to shrink down in size quite
a bit.
And let's see if I put that in it correctly is try something else other than 200 pixels.
Let's try like 150.
That'll get us a better result.
Yeah that's better right there.
So we can very plainly see that each of those different cells have been essentially scrunched down quite
a bit.
Now this cell right here is only one hundred and fifty pixels tall.
However many of our images are actually much larger than that.
So like this image right here is way larger in height down to 150 pixels so it's spanning down underneath
its assigned cell and it's being overwritten by the next image down.
So this definitely solves the problem of getting images to somehow scrunched together vertically.
But now we're running into an issue where each of them is kind of overriding the next cell down.
So to fix this we've got a solution but it's really hard to implement in CSSA alone.
Let me show you what we can do.
I'm going to select just one of these images like this one right here that's definitely being overlapped.
And then I'm going to add on a custom style to it.
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
a value of span.
Let's try like five.
About two that's better or three that's even better.
So essentially what this grid row end with span three right here does it says this cell in particular
like this element needs to be allocated three cells worth of space.
So if I now inspect you'll notice that this image has been given three cells to display itself and the
next image is going to show on the next available spelt cell down.
Or essentially the fourth cell.
In this case.
Now this definitely works to a degree.
It's going to give us more space.
However the problem is that this is a rule that we can only apply to essentially all of these images
at the same time and each image is going to require a different spand value.
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
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
every single one of these images is now going to tick up to Spens.
And we're back to the same problem we had before.
We're a really short image is going to have a big white gap underneath it.
So what it kind of feels like is for every individual image we need to determine the height of the image
and then based upon its height we can then decide on how many spans it should be allocated.
And that's exactly what we're going to do.
We're going to use this grid Row End thing right here along with playing around a little bit with the
grid.
Auto rows to somehow make sure that image right here only gets just as much space as it needs.
But then the next one over it gets way more to it to adjust for its much larger Heights.
Now this is something that can not be solved with CSSA alone because we are talking about applying some
styling here based upon the content of this image.
So we're going to actually have to write some javascript to do this.
Now this is where re-act starts to come into play.
So let's take a quick pause right here.
When we come back the next section will talk about how we're going to approach this problem with re-act.