Final CSS Grid Solution

[00:00:00]
>> So I hope you had fun with that particular exercise building your own inside page based on some of the materials that I gave you. I'm gonna talk through my particular answer using the mosaic style layout and then we had that one grid cell that had the text inside of it So let's take a quick peek into how I put that page together.

[00:00:19]
In the HTML what I've done is recycled the headers that I had from the previous layout, of the website and all of the CSS that went along with that. So that is the header and I kept down here the footer of the webpage as well which we coded in the flexbox portion of the course.

[00:00:36]
These two particular layouts, the header and the footer work really well in flexbox. I didn't really feel the need to recode those inside of grids, so I just left them alone. The concept of a series of rows stacked on top of each other, worked with this particular design of the website.

[00:00:53]
So I kept that concept as well. And so that meant that here inside of the content portion of this web page, I've set it up in the following way. So I have a section, I give it an ID of donut. Here is the title of that section Sharon McCutchin, donut love.

[00:01:12]
And then we have a series of images inside of an unordered list as you would expect. So here's my unordered list. I have a list item, I've given them a class of d1 to d5, as in donut one to donut number five. And we have images here with the images themselves and then the description that goes with them and the descriptions are all the same, they're just donuts with sprinkles.

[00:01:41]
Inside of number three, I added a div with a class of author, it's an h3 for that particular heading along with that particular text. And the links and so forth are all inside of it. That div with a class of author once again as always managing our parents and children here.

[00:02:05]
We have that div and we have then after it the image. So that means that within this li we can use grid to orient the text and the image on top of each other. And then they can separate at smaller screen sizes. So that's the technique that I use here with the overlapping grid cells.

[00:02:26]
All the rest of them are pretty much the same the li with the the donut image inside of it. Now let's look at the CSS. And so here in the CSS, outside all the media queries, we have the following. So, I have a donut image, I set that to it's hack, a width of a 100%.

[00:02:49]
The ul winds up being my grid parent or the grid container. And the li's wind up being my grid items. So here outside of the media queries all I've said is display as grid with a one REM gap and one single column of one fraction wide, that's all I did here.

[00:03:09]
And specifically for d3, I set it on its own row. So make sure it displays on the first row of that particular cell. Then as we go into the media queries Down around line 476 in the CSS, this is where all of that starts. So here, for the donut ul, I've set up my two columns with a minimum of 100 pixels and a maximum of one fraction.

[00:03:37]
Because I want my donuts to be big enough and then I've spelled out exactly where I want each one of those images to display. So I'm not anticipating an unknown number of images. This is an art site, I have five images, those are the five that we're gonna display.

[00:03:54]
And I've set them up to display in a lovely sort of way. So the interesting part of all of this winds up being d3, which is as I told you is possible before, both a grid item and a grid container. So, the first two, the grid column and the grid row, make it a grid item.

[00:04:13]
And that's indicating where it's gonna display in the grid pattern. And then inside of d3, we also have its own grid where we have one column and one row as I have showed you before. So the d3 image and the author will both occupy that same single row in the single column that I had set up.

[00:04:36]
Then I give my image and opacity of 0.2 such that my text becomes readable and the image just sort of whites out a little bit there in the background. And then make sure that the author text shows up on top. Give it a little bit of padding, give it a z-index so it shows up on top of the image and not behind it.

[00:04:55]
That's really important. When you take a look at this because of the opacity, without the z-index, let me show you what happens. If we just did that much there, let me show you this in the default browser. So this is coded up with a couple of links. But notice that because of the opacity of the image, it looks like you can read this text just fine, it's no big deal.

[00:05:21]
But the links are unclickable unless you add that bit of CSS there. So if we put in that z-index and then refresh our webpage, now those become clickable links. So, even if it looks right, make sure you test it, make sure you can mouse over those links. Make sure that they are actually clickable.

[00:05:51]
Otherwise you need to adjust your z-index