With Cascading Style Sheets (CSS), you can use the CSS grid layout to create a responsive section that displays notable logos on your site. This section often displays logos of companies that trust your product.
00:00 — Introduction 00:16 — Structure 01:35 — Content 02:55 — Grid 03:37 — Recap 04:16 — CTA: Encouragement from Grímur
[Sara] It's floating. You see?
[McGuire] Riveting. We're making huge progress in this course so far. We have our navigation now. We have our hero section from the first lesson. And in this lesson we'll add our structure and content and we'll use CSS grid to create this logo section.
So let's start with the structure. So we have our page. And in the navigator, sometimes things, especially as they're expanded, can get a little messy. It looks a little visually overwhelming at times. That's okay. Let's just collapse.
And if we go to our Add panel, we can grab a section. And for us, we're just gonna drag it right at the bottom underneath our first section, underneath our hero section. And we already have a class for Section. Remember, we styled this section. We added some padding before. Let's make sure we're applying the same thing to our new section. So we'll just click in the selector field, start typing, and we see Section. Let's apply that. And you see the same 60 pixels was brought along with it.
So what else do we have in our structure?
[Sara] Container?
[McGuire] Well, container. That's absolutely right. Let's drag in a container and that'll keep everything neatly bound in the section. So we have our section. Inside the section, we have our container.
Now there's one more piece, one more piece to the puzzle. And that is a div block. Now, why a div block? Why aren't we using something like phosphorus? That would be the wrong element. But the reason we're using a div block is because in just a moment, we're gonna turn it into a grid. We're using a div block to hold and wrap other elements.
So with our div block, we're gonna do something special. We're gonna call this logo holder. So with our div block selected, we're just gonna add Logo holder.
And that's it. That's our structure. Now we're ready for our content. So in this case, it's our logos. So let's go over to assets. And let's see what we have. We have Avenue 5. Let's drag in Avenue 5. Let's certainly drag in SpaceX. Drag in United Federation of Planets, we have ESA. This is the European Space Administration. Is that right, Marc?
[Marc off-camera] Agency.
[McGuire] European Space Agency. We have, what is this one? Space.com. And NASA.
[Sara] NASA
[McGuire] What is NASA?
[Sara] It's, it's right here.
[McGuire] National Aeronautic, er Aeronautic, National Aeronautics and Space Administration?
National Aeronautics and Space Administration. Nailed it.
All right. So with our Logo holder selected, this is where we're gonna use CSS grid. So we showed flexbox before. Flexbox, when we turn that on. We know that we can align and justify content based on properties we set. We can use different options here. And you know what? That might work for us. We might get the look we want right out of the box like this. That's okay. That's a good thing.
The problem is when we go down, and we'll do this later when we get to responsiveness, but as the viewport narrows, we get to Tablet, we get to Mobile landscape. Notice how everything starts to overflow. Now there are different things we can do in flexbox that will solve for this, but we thought this was a good opportunity to demonstrate CSS grid.
So with our logo holder selected, we can just switch its display to grid and we can see that it doesn't actually look that good right away, at least. And that's because by default it's two columns and two rows. We don't need that layout. And you can even see it's auto generating an extra row because there's six items here. So all we have to do is increase the number of columns...
[Sara] And adding more columns.
[McGuire] Yeah, six, six columns. And we don't need that second row. So let's delete that second row. And we can see our layout. It's getting there. It's not perfect yet. And...
[Sara] Let’s center them a little bit more.
[McGuire] That's absolutely right. We can just like flexbox, we can align in our grid like this and we can put it to the right. We want it in the middle. And this is gonna set us up for success later because when we go into, let's say mobile portrait, we can turn this into, instead of a six by one, six column by one row, we could set it to a three column by two row grid. So we're not gonna do that now. We're getting to responsiveness later. But that's the basic implementation of CSS Grid. We added our structure, we configured our content, and we played around with our grid controls to get these logos looking however...
[Sara] Exactly how it is right now.
[McGuire] That is exactly how it looks. So up next, we're going to use CSS Grid this time to create full-blown feature cards, and we'll do it in record time.
[Grimur] Hey, it's Grímur again. I just wanted to drop in and tell you you're doing such a good job. Just keep it… keep going. Honestly, you know, that's. That's all it matters. Just keep it up. Just wanted to pop in and say, You're doing great.