Lessons:10Length:47 minutes
132477 adam noonan thumbnail grid layout and flexbox 02 400x277px 100317
  • Overview
  • Transcript

2.4 Fixing the Widths

Now that we have the grid layout set up in CSS, we can see that our columns aren’t matching the relative widths that we set up for them. In this lesson, we will explore why that is and how to fix it.

Useful Links

2.4 Fixing the Widths

Hello, and welcome back. Now that we've set up our basic grid layout using the CSS Grid Layout system, we can see that our columns aren't doing exactly what we expected. If we look in our CSS, we can see that we set up our grid template columns so that our middle column should be about twice as wide as our two sidebars. And you'll see that our two sidebars should be the exact same size. We both set them to a value of 23 FR. But if we look at our page, we can see that the left sidebar is much wider than the right sidebar. Also, we can see overall that our page is stretching past the boundaries of the border, and we have to scroll from left to right to see everything. Well, the reason this is happening is because the content of a column in the grid layout system can affect the width of the column. So if all we had in these columns was a bunch of text, then this would work just fine. But we have these images that are stretching out the widths of our column and making our page much wider than we want it to be. So we're gonna fix that very easily by pointing at each of these pictures and setting them to 100% of the width of their container. So you can find the URL for this code pin in the course notes for this lesson. Once you've got that open, we're going to start with a new fork here. And we're going to target, first of all, our images in the popular column. So if we go back to our HTML, and let's collapse some of these sections so that we can see a little bit better. And we wanna go to this sidebar1 section. So we have an h2, which is just this item here with a red background. And then below that we have a number of articles, each consisting of an image, an h3, and a paragraph. And the paragraph is the date at the very bottom here. So what I wanna do is I wanna target these images and simply set their width to 100% to make them a little more responsive. So again, we're looking inside this popular article class at the images inside them. So we're gonna into our CSS. I'm gonna scroll down a little bit till we get to our sidebar areas. And let's go just below sidebar1, because that's where this particular piece exists. And I'm gonna point to that class we just talked about, which is called popular-article. And we're gonna look at the images inside that popular-article item. So this should point to each of these images here in this column. There are four separate items that have a class of popular-article applied to it. So for those images, we're simply gonna set the width to a value of 100%. And you'll see that that already changes some things a little bit. But our middle column is still really, really wide, so we still have some things to fix here. So we need to jump into our middle column now. And if we go back to our HTML, let's collapse our sidebar. It's inside this div with an id of feature-articles. So we wanna look at the article element inside feature-articles, and at the image element inside that. So let's go into our CSS. Let's scroll down until we find our feature-articles section. And let's create a new rule here, so feature-articles. We're gonna point to the article element inside that. And inside that, we're gonna point to our images. And here, we're gonna do the same thing. We're gonna set the width to a value of 100%. And you'll see that that already takes care of most of the problem. We no longer have that sidebar scrolling left and right. So then we can jump into our right sidebar. And if we look at our HTML, let's go ahead and collapse this feature-article section. Here we have sidebar2. Inside that we have our heading. And then we have this unordered list with an ID of recent posts. So we're gonna look inside the recent-posts ID. We're gonna look at this div here, with a class of post-image, and we're gonna look at the image element inside that. So let's scroll down to our recent posts section, and let's put it right here. So we're gonna point, again, to recent-posts. Inside that, we're gonna point to the post image class, post-img. And then we're gonna point to the image elements inside that class. And once again, we're just gonna set the width to a value of 100%. And this isn't what it's gonna end up looking like. But eventually, these images are gonna be much smaller, and there's gonna be some text out to the right of them. But for now, our columns are set up like we want them. Now our left and right sidebar, as you can see, are the same size, and they're both about half the width of the center column. So again, that's something you just wanna be aware of when you're working with the Grid Layout system, is that even when you set the widths of your columns, the content inside those columns can still change the final size of that column. So thank you for watching, and I'll see you in the next lesson.

Back to the top