Learn how to define columns and rows on a grid.
- [Instructor] To create a grid, you first need to tell the browser that it's a grid and then define the rows and columns. On our exercise page, we have 12 divs inside a container div. Over on the page we can see we have 12 boxes. The divs are block elements, so they take up the full width of the page. The first thing we're going to do is add display grid to the container element to tell the browser that it's a grid. So over here in the code, I'm gonna go to line nine for the container class I'm going to type display colon grid and save and go over here and refresh.
And nothing appears to happen, but if we turn on the Dev tools we can see it's a grid with one column. There's a grid listed down here in the grid section and I can click the box to see the grid lines. One column is what we get by default so we need to go in and define some more columns. We're going to use the property grid-template-columns. This tells the browser how many columns we want and how wide they should be. For this exercise we're going to make two columns. Let's say, the first column is 200 pixels wide and the second is 100 pixels wide.
So, in the same container under the styles I'm going to do grid dash template dash columns colon 200 pixels and 100 pixels separated with a space. Save, go over here and refresh. So you get this, two columns 200 and 100 pixels wide. Since we have 12 grid items only two go on each row and then they wrap to the next row. There's a couple more terms that you need to know.
There are two types of columns and rows, or tracks, that can be in a grid. Explicit and implicit. Explicit means that we have specifically told the browser that we want there to be a column or row, where implicit means that we haven't told it to make a column or row, but it makes them on its own because it has extra grid items and needs a place to put them. The difference between these and the Dev tools is that explicit tracks get dash lines and implicit tracks get dotted lines. You may have to look closely to see the difference.
A dash line has longer lines in it than the dotted line. There's also a solid line around the explicit grid which is all the explicit rows and columns. You can see the dash line here where my cursor is on the bottom of the page because that's where we explicitly defined two columns. We didn't define any rows, so on the right you see dotted lines and not dash lines between the rows. So to define some rows we will use the property grid-template-rows. We're only going to define three of them right now, 200 pixels, 50 pixels, and 100 pixels.
So over here on line 12 of the code grid dash template dash rows and then colon 200 pixels 50 pixels and 100 pixels. Save, and go over here and refresh. So now you can see that the first three rows are sized like we described, 200, 50, and 100, but there's still more rows and that's because it still needs a place to put these extra grid items. By default, if there are any extra items the browser creates additional rows for them, implicit rows.
You can it to create additional columns instead, which we'll learn how to do in a later video. Looking at your Dev tools, you can see the solid line around the explicit grid that goes down three rows where my cursor is right now and those three rows have the dashed lines between them because they're explicit rows. The rows down below that still have the dotted lines as we did not define them.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox