Grid Exercise

[00:00:00]
>> Top grid is now done for our desktop layout, we're gonna need to go back and revisit this top grid for mobile and tablet layouts. But before we do that, let's focus on the bottom grid, okay? So that means we're gonna go back to our HTML and we have a whole bunch of these items here underneath.

[00:00:22]
So we have, once again, a course link, a course image, and a course title. That's all. And what we're going to do here is I'm gonna set up the first one for you, and then you can set up the other ones. So we are going to have, of course, an image source would be this particular image here.

[00:00:48]
In this case, it's a webP image, okay? And the Alt text for that is going to be the name of that particular icon, in this case, CSS Projects. And then around this, we are going to put in a link. So this is a href = ' Target = _blank.

[00:01:30]
And then we can end with a /a, okay So you should see, down here on the bottom, you should see an image. And they may be kind of big, don't worry about it, we'll fix that particular problem, okay? So in other words, we just have clickable images here, we have alt text that's available for screen readers, and that's pretty much all that we need down here for these five images down at the bottom.

[00:02:01]
Okay, markup all the rest of them, once again, I recommend just copy paste, and then substitute in the appropriate links. All right, so hopefully you did okay with that, you should now have a series of images there on the screen. You'll see that they start with some kind of link.

[00:02:37]
Hopefully they open in a separate window. And then you'll have your image that's there with the alt text that was given to you for each one of those. So you've got five of these images, and if you scroll down the page, there they all are in all their glory.

[00:02:52]
They're kind of big, but that's cool. That's fine. All right, everybody got that okay? All right, now all we need to do is make them stretch across the bottom of the three images that we have here at the top. And so to do that, once again, we need to manage our HTM.

[00:03:12]
So we know that we have here in our HTML, we have our div with a class of top grid, right, that was our parent, and the figures here were our children. You declare grid on the parent, in this case a top grid, and the figures then line up exactly as you wish in space.

[00:03:31]
We're going to do exactly the same thing here with our series of linked images. So we are going to add to this a div with a class of, guess what? Bottom grid, because I'm super creative that way. And if you scroll all the way down to the bottom here, we are going to add another /div at the bottom.

[00:03:55]
So now we have a nice grouping here for our five linked images, okay? So that's the change you need to make to your HTML. Then when we take a look at our CSS, still inside of our project's layer, we're going to add our next style which is .bottomgrid.

[00:04:20]
And this is where we say display grid, and what we wanna do is we basically wanna put all five of those images next to each other. That is a series of five columns, they are probably all exactly the same width. So we can write that as grid template columns, and there's a shorthand, I mean, you can write, 1fr,1fr,1fr,1fr, if you wanna write that, you totally can, and it'll work great.

[00:04:53]
In fact, there they are. How awesome is that? But there is also a shorthand you can use for this, which is repeat: (5), ifr. In other words, give me five 1fr's. It does exactly the same thing, okay? And there they are. Let's give them a little bit of space in between.

[00:05:17]
How about a gap of 2rem. There we go. So pretty? And 2rem because we used 2rem up here on the top as the gaps in between our grid elements up here on the top. And then the last thing I wanna do is actually give this a little bit of margin of 2rem0, so that will give us a little bit of a gap in between our top grid and our bottom grid.

[00:05:46]
Pretty, and now it all looks like one great big huge piece, and it really isn't, it's two completely separate pieces here in space.