In the last section we got the real height of each image after it was actually loaded into the browser.
So now we're going to use that height to figure out how many spans each of these images should occupy.
As a quick reminder let me walk you through that process really quickly to say you recall why this is
relevant for the grid CSSA stuff.
Zongo and to expect or inspect this div right here.
All right so this div is inside of the image list.
Remember we had set on the image list class.
The thing that wraps all these different images.
We had set a grid auto rows of 150 pixels.
That means that every single one of these little tiles here or each of these cells is going to be only
150 pixels large.
Now that's going to cause some these images to be cut off.
So in order to get around that we can set a grid row and property with a value of like span two and
that's going to allocate two cells worth for that particular image.
If we did span three it would give us even a little bit more.
So now that we have the height of this image and we know exactly how tall each row is because we set
that as a rule inside of our CSSA file right here we know each row is equal to 150 pixels.
We can use the image height and the size of each row or the height of each row and essentially just
figure out how many rows it takes to display each of these images.
That's it.
OK.
So to do so back inside of image card here's our set span's.
We're going to do a let's first pull off just the height here really quickly and assign it to a variable
like so.
And then to get the number of spans that this thing requires.
I'll do my height divided by the row height which is 150 pixels.
And then I'm going to add one to this.
The reason that I'm going to add one is to make sure that if we have like a portion of a row that this
image needs it's going to be rounded up or essentially a ghost like the next highest row and then just
to make sure I'm going to do a math dot ceiling on this thing just to cap its value and you it actually
right now let's remove that plus one just so we can see what happens when we just start with this basic
instrumentation right here.
OK so after we calculate the spans we'll then set it on our states X-O notice how we have a identical
key and value here so we can use a little bit of E.S. 2015 syntax to shorten it just be span's like
so now and those I've used state without initializing state inside of my constructor first.
So I can very quickly take care of that inside my constructor.
I'll say this Scott States is span's and I'll defer all its valid to be zero.
Like so.
So until we actually load the image and determine how much height it requires We're going to say this
thing basically requires zero space which is totally fine.
So the last thing we do.
Is take that spans value and assign it as a style to the div right here.
So essentially remember right here I just mentally put in grid row and span three.
You want to take that number of spans and essentially insert it right there span three or four or five
or whatever it is.
So to do so on this div I'm going to pass in a inline style.
It's going to have grid row ends.
And then for the value will you say yes 2015 template string.
So I use a back tick right there.
Remember a back tick is the character to the left of the one on your keyboard.
It is not a single quote.
It is a back tick.
And then I'll say span.
And then just the number of spans this thing requires so dollar sign curly braces this state that spans.
All right.
That's it.
So let's save this.
We might need a little bit of tweaking in here but that's totally fine.
Let's just make sure that this works as it stands.
OK.
So I can flip back over it for Kerr's again.
All right.
Now you'll notice that in some cases there's a little too much space.
But in other cases it's just right.
So it looks like we're really close to the last thing we're going to do here is going to be just a little
bit of a trick.
OK.
That sounds to me a little bit of a trick.
It is kind of interesting.
So remember when we set on the image list div like the thing that wraps all these images we had said
grid auto rows 150 pixels but we actually chose that kind of arbitrarily and now with the 150 pixels.
In some cases we are getting too much white space underneath it.
So one way that we could fix this would be to make these rows actually much smaller like 10 pixels.
If we only use rows of 10 pixels that means that we're going to get a lot of fine grained detail and
make sure that we do not somehow over allocate too many rows to any individual image.
Let's make these changes and you'll very quickly see what I mean.
So back inside my image list at CSSA file I'm going to find grid auto rows which allocates space to
each row.
I'm going to change it down to be just 10 pixels and then back inside of my image cart.
When we take our height and divide by 150 remember that 150 right there was to figure out how many rows
this image needed to be displayed properly.
So now we don't have rows of 150 pixels.
We have rows of 10 pixels.
So going to change that to 10 as well.
The net result is that each image is going to take up far more spans than it did before which is totally
fine.
So now save this will flip back over.
Try it again.
And while it still looks like it's a little bit off.
But don't worry.
This is very easily fixed if you do another kind of mouse over here and look at that component.
Remember that we had set up that grid gap rule right here to allocate 10 pixels between each one of
these cells.
So now that we have rows of only 10 pixels the Greek gap of 10 pixels is essentially doubling the amount
of whitespace we need.
So the last thing we're going to do to fix this is make sure that in the vertical direction or between
rows we do not have any grid gap.
So to do so I'm going to flip back over to my CSSA file.
Here's the great gap right here.
Now with that great gap we can actually specify the distance between cells in the vertical and horizontal
direction by just passing into separate values.
So in front of that 10 I'm going to say zero.
Which means put 0 pixels between each row.
So now there's going to be no gap between each row.
OK it's going to save this.
We'll do one last time over and you'll notice.
Now we are set.
Perfect.
I don't think that could be any better than it is right now.
So you'll notice that all of these images are now awesomely nicely titled next to each other.
OK.
So that's it.
I know that this was a little bit of a headache.
I think it only took about six or seven sections so maybe it wasn't as bad as I thought.
But you know we actually got it working and it looks pretty darn good.
So because I guess I love flowers and plants so much.
We can try flowers.
We can try it plants and yeah this is looking pretty darn good.
OK.
So I hoped you enjoyed putting this together.
That is the image app.
In total we're finally done.
The big takeaways on this well.
We're going to have a lot of them.
Let's take a quick pause right here and we'll do a review in the next section.