We've now got our list of images to display successfully.
But the images are really really large.
So in this section we're going to start working on this V-2 implementation of this app.
It's going to require us to refactor a couple of different things with the ultimate goal of showing
reasonably sized images that kind of tile together really nicely.
I'm going to tell you right now the first half of this work is going to involve just a little bit of
success which I know is completely off topic from react.
Well we're going to very quickly realize that CSSA is only going to take us so far and we're going to
have to learn about a new re-act feature in order to really build something that looks like this right
here.
So let's get to it.
The first one to tell you about is the system that we're going to use to lay out these images and it's
going to get us only about halfway there.
It's called The Grid CSSA system.
So it with the great CSSA system we find some element inside of our of our Dom hierarchy or component
hierarchy.
In our case and we'll give it a style of display grid then every image or every element underneath that
div is going to be laid out in a grid fashion.
Now I was kind of in a nutshell but there's a lot of other things going on here.
In order to really get a understanding of what's going on the best thing to do is add in a little bit
of success to implement this grid system and then just kind of see what happens.
So with that in mind I'm going to flip on over to my editor and in sudden my component's directory I'm
going to make a new file called image list.
CSX.
So we're going to write a couple of rules inside of your to customize the images that are displayed
by the image list component at the top of image list.
I'm going to add in a import statement for that CSSA file.
And then I'm also going to make sure that I am in a class name of image list to that div right there.
I added it in between the last section and this one my mistake.
It was not there before.
Let's just put it in right now.
Pretend like I just put it in for the first time.
There we go.
OK.
So now back inside of Emmett's list I'll add in a selector for image Dasch list and I'm going to put
2 rules inside of your and you'll very quickly see what they do on the screen.
I'm going to say display grid and then I will also give this grid template columns with repeat auto
fill and then as a second argument I'll say min max 250 pixels and one FBAR.
And that's kind of a very long rule sullenly So that entire line.
All right so we'll definitely discuss exactly what that is doing in just a second.
First let's put one more rule inside if you're going to say image Oh come on image list.
There we go.
I want to get my image and I'm going to give this thing a width of 250 pixels.
So now all of our images are going to be at most 250 pixels.
All right.
So let's now save this.
And we'll see what happens inside the browser All right I'm going to do a quick search year for cars
again.
Now you'll notice that we have our images being laid out in a grid of sorts.
Now they're not very well fit together certainly not how we kind of originally envisioned it over here.
So like I said we're going to have to definitely do a little bit of work on the rock side of things
to get these things to fit together very nicely.
But first let me tell you a little bit more about the grid system inside of my chrome console.
I'm going to go to the elements tab and then click on this little arrow right here that will allow me
to inspect all these elements then will hover and you'll very quickly start to see these little dotted
lines appear.
So each of these dotted lines that you see appear are essentially one of these different grid slots
that are going to show up.
So the great CSSA system is going to create that grid and then take each of our elements and shove those
elements elements into a different spot within that grid.
So right here we see the space allocated for the first image and then over here is the space allocated
in this dotted line box that you see for the second image and same thing down here in down here and
so on.
Now I want to show you a couple of different rules that we can play around with to adjust how these
different images are laid out inside of here.
First off I want you to notice that each image is kind of shoved up directly against each other which
doesn't look too nice.
So in order to make sure that there's a little bit of standoff between those images we can add in an
additional rule of grid ash gap 10 pixels like so.
So that's going to make sure that each of these different cells have a 10 pixel load spacing between
them on both the sides and in between top and bottom.
Let me save that CSSA file.
And if I flip back over I'll see that I now get a little bit of separation in there.
Now when you do that inspect Now you can really start to see those cells come together.
All right.
So next on Tell you a little more about the grid template columns rule.
Essentially what this does is it creates a set number of columns autofill right here means that the
CSSA roll or the grid CSSA system is going to automatically decide how many columns to insert on each
year.
So in this case it decided to put in two and then the second argument right here minimax 250 pixels
one FFR means that each one of those different columns is going to be at minimum 250 pixels wide and
then at most and this one's a little bit challenging to understand one as far as space.
Basically a maximum allocation of space one for in this context means that for every column that we
creates We want them to all be equally sized.
So in this case it's kind of challenging to communicate exactly what one does.
Essentially if we had multiple columns being created and we were manually creating each one we could
assign a different value to them and then some different color or some of those columns might have a
greater or smaller width assigned to them automatically.
All right now adding in that column thing definitely looks like it improved things.
You know we got a little bit of standoff here but remember the original idea was to make sure that we've
got this like really nice kind of closely fitted set of images.
So let's take a quick pause right here.
When we come back the next section we're going to do a little bit more work on this grid system and
see if we can't get these things to fit together a little bit more nicely than they currently are.