Mosaic Grid Solution

[00:00:00]
>> I hope you did well with challenge number 12, trying to lay out these images in a mosaic grid. And so let's go through exactly what I did in terms of my code and and how I solve this particular problem. So here in my HTML, we have the setup as pretty much as you saw.

[00:00:20]
The HTML written in the Flexbox portion of the course we have a section I've given it an id of pop art to be consistent with the notation that I was using inside of Flexbox. We have an h2 called Pop Art. And then we have our images set in an unordered list because this is just a series of images, they could go in any particular order.

[00:00:41]
Inside of that we have a series of figures and figure captions. And those have images and the figure caption associated with them the figure caption has the link. That's basically the way this is set up the whole way through. So what I would need to do to this HTML in order to make this work you'll see that occasionally I have thrown in a call span2.

[00:01:04]
And occasionally I've thrown in a row span2. So that is what is going to be responsible for driving the spanning of the various cells and columns here inside of my layout because what we're going to do is we're going to declare our grid on. And then our allies become our children so the url is the grid container or the parent the allies are the children or the grid items and that's the way this is all going to line up.

[00:01:37]
All right so, as always, the best place to start with this is to take a look at your image. And you're going think about how many columns and how many rows you have here. So here we've got one, two, three, four, five, rows. And we've got one, two, three columns, which is great.

[00:02:01]
And then we just start setting things up accordingly. Inside of our CSS if you scroll on down here, given you a lot of CSS that we wrote yesterday. So starting here inside of the media query, remember outside the media query, the images we'll just stack on top of each other.

[00:02:23]
There's actually no styling for the pop art portion of the site outside of the media query but inside of it, we've added our pop url. That will be our display grid. And I want three evenly sized columns. Easiest way to do that is just to make them all one fraction big.

[00:02:40]
And I gave them a 10 pixel gap. Then I set up my three styles here call span2, a call span 3 and a row span 2and all I had to do is set up a grid column or grid row property and just set it up to say span2 or span3.

[00:02:57]
So wherever I happen to place that in the particular web page, then the image is going to span over that many columns or that many rows. Notice here too, I've added at the bottom here for some reason the fingers don't always fill their LI container. So I found that by adding a height of 100% on the figure help to keep those evenly sized.

[00:03:19]
So that is how I solve this particular problem here, inside of this particular challenge. So that is the first part of this, we've got a mosaic grid all coded up for you want to take a quick peek at that inside of the webpage. So here's the way it winds up looking.

[00:03:41]
We have our various images, they're all of the same height, and it's a fun and engaging layout. There was nothing wrong with what we did with Flexbox in terms of all of those images all next to each other But this to me is much more interesting from a design perspective.

[00:04:00]
All right, so now that we've got that in place. Let's go on to incorporating that grid layout. Now, it's plugging in to our main Webpage and what I did was I got rid of the collections portion of that web page and substituted in this pop art piece. If you wanted to keep that collections layout that we coded in the Flexbox portion of the course There's absolutely nothing wrong with that.

[00:04:24]
You could just add this on as part of the webpage if you wanted. So we're starting with the HTML here with our incorporating this pop art into the main homepage. This is the homepage from yesterday, and I have scrolled all the way down to the bottom. Close to the bottom anyway past the featured print, Some of down around line 83.

[00:04:52]
And I just copied the HTML that I had generated in the 12 A exercise, pasted it here into my index.HTML. I didn't need to make any changes here along the way. Because I have all of the styling that I had been previously using is carrying over here into this design.

[00:05:12]
The only thing that needs to be added are those additional classes that are going to make this a grid system instead of Flexbox. And the classes that are going to set up the spans across the columns and across the rows. So then here inside of our CSS, Down around line 157, this is outside of the media queries.

[00:05:39]
I had set up our figures to have one border color in this case, I picked color number eight. You could have picked any of the colors that probably would have been fine. I also set up the object position and the object fit here. For the image, the object position is set to 0 and the object fit is set to cover.

[00:05:59]
To differentiate these images from some of the other ones that we had where we're changing some of the positions in the Flexbox portion of the course. Okay, and then inside of our tablet media query, we're all the way down to line 395 inside of our tablet media query and in here I have copied over are the call span and row span columns here.

[00:06:21]
And then finally the last thing that I did here on row span2 figure I have a max height of unset. We had previously put on the figure elements way, way far up towards the top in the mobile version of this website. We had set it to have a max height of 400 pixels for all of our images.

[00:06:41]
When you bring your mosaic into this layout here on this homepage, that max height of 400 pixels would apply to everything that's inside of your grid system. In that particular case the way these images are in their sizes and so forth it really chopped them all in pieces and so I didn't like that effect.

[00:07:02]
I just turned off the max height here by using the unset value so it would forget about that max height of 400 pixels. And so that fix that problem particularly on the rowspan2 where that was an issue. And that's pretty much all I needed to do. Those styles will carry then into the desktop layout, which is exactly what we want.

[00:07:23]
So that's how you can code up a little example over here in isolation and then very easily integrated into your homepage