Placing grid items - CSS Tutorial

- [Instructor] Earlier we saw that when we define a grid, grid items are automatically placed on the grid. And if we go into the style sheet for this lesson, I'm actually going to close this explorer view just to give us a little more room. So let's define our grid template columns as 2fr's, and then we're going to repeat two columns at one fr each. And then let's declare our grid template rows as auto 1fr and 3fr. So now our grid items are automatically distributed within this grid, starting from the top left, all the way down to the bottom right. And with this grid overlay turned on, you can see that there are empty grid cells and that's because I don't have enough items to automatically fill out all the cells that I've defined. This automatic placement is a handy feature of grid, especially when you're working with dynamic content or unsure how many items you'll have. You can define an explicit grid using a combination of grid template columns and grid template rows, and then just let the browser auto-populate the grid based on whatever grid items are available in the dom. But I've already hinted that the most powerful thing about grid is our ability to put any grid item anywhere on the grid using only CSS. So far, we've looked at a couple of properties that apply to the grid container, grid template columns, and grid template rows. But if we want to start wielding power over where individual grid items are placed, we need to look at properties that apply to grid items. Let's start with grid column and grid row. The most basic way to place grid items on the grid is to declare grid column and grid row values for each individual item. Both of these properties take values corresponding with the lines on a grid. So if you want to place some grid items, say between column lines two and four, you'd declare grid column two slash four. That means I want this item to start at grid column line two and extend to grid column line four. And if you also wanted that item to span two rows, say starting on the first grid row line and ending on the third, you'd declare grid row one slash three. Using this method, you can take each grid item in any layout and put it where you want on the grid. Going back to our example for this chapter, let's move each of these items around to create the layout we want. For starters, I want to move this masthead over to the right-hand side so that it spans these two columns from two to four. Also, I want to move it down to the second row. So it would be starting on grid row line two and ending on grid row line three. So to do that over here in my CSS, I'll create a rule for masthead. I'll say grid column two slash four and grid row two slash three. Whoops, let's get our trailing semicolon there. And if we refresh, now we can see that masthead has been moved and it's starting. If we scroll up to the top, we can see that line number. It's starting at grid line two, it ending at grid line four. And as for rows, it's starting at grid row two and ending at row line three. So notice that moving this one grid item out of the way caused all the other grid items to flow up and take up the new available space. So the page title now flows up to that first position and everything else flows in and fills up the grid automatically. Next, let's take the page title. I want this to span the full width and occupy this first row. So I'll say page title. I'll set the grid column to one slash four. Alternatively, you could say one and then minus one, and that would also span the full width. So now we've got page title spanning the full width, and then the items flow below that with the exception of this masthead, which has already been specifically placed on the grid. So let's keep doing this with all of our items. I want the main content to sit in this first column and span two rows. We'll say main content grid column, start at line one, end at line two, and then for grid row, we're going to start at line two and end at line four. So now we just have the sidebar and footer taking up the remaining space. So actually want the sidebar to be over here on the side, and I want to move the footer down below. But something I want to point out here, I've only explicitly defined three rows, so I'm actually trying to move the footer into a row that doesn't exist. How do we do that? Well, this is where we get something called an implicit grid. These are grid lines that the browser creates to accommodate items that are placed outside of an explicit grid. They're auto-sized by default, but you can use the grid auto-columns and grid auto-rows properties on the grid container to size them. So going back to our example, let's have this sidebar span these two columns. So create a new rule for sidebar and we'll say grid column. I want to start at line two, end at line four, and we'll also have it occupy that remaining row that we've explicitly defined. So we'll say grid row, start at line three, end at line four. Now when we save that with our grid overlay here, we can see that we've got some additional implicit grid lines created for one row to accommodate this footer content section, and it maintains these three columns. This implicit grid makes sure that our grid stays structurally sound. So let's say we want the footer content to span the full width, so from this first grid line to this fourth. So let's create a rule for that, and it helps when I use the correct CSS class. So let's go footer content, there we go. So now it spans this full width from this first grid line to the fourth, and it's actually starting at grid row line four, even though we didn't specify that it should. It's automatically placing itself at this implicit row line. And note that this row is auto-sized because we didn't specify that row size ourselves. There's one more thing I want to show you when it comes to declaring grid column and grid row, and that's the span keyword. In addition to saying what line we want an item to start and stop at, we can specify how many rows or columns we want an item to span across. Let me show you how that works. So here for this footer content we said we wanted to start at grid line one and end at grid line four, but we could also write this as start at grid line one and then span three. So now, we're still starting at grid line one and we're spanning three additional grid lines to end at line four. So that's just another way that you can define grid column or grid row. At this point, we've used both grid column and grid row to place our grid items exactly where we want them. As we move deeper into this course, you'll see many more examples of this.