Learn how to align tracks (rows and columns) in a grid.
- [Instructor] You may not always want the grid to fill the full area of the grid container. You can take the grid, that is all of your tracks, and align them within the grid container. We're going to start with a grid with four columns and give them and auto-width. By default, all of the columns are expanded to fill the full width of the gris container, but once we start aligning them, they will only take as much space as needed. So we're going to use the justify-content property to tell the browser where the rows should be aligned horizontally. Auto is the default that you want all the columns together to fill the width of the container.
So this is, on line 13, justify-content: auto; save, and refresh, and nothing changed because that was already the default. Changing that value for justify-content, if I change it to start, save, and refresh, it moves all of the columns to the left at the starting edge of the grid container. Changing it to end; and refresh moves them all the way to the ending edge of the grid container.
Changing that to center moves them to the center of the grid container. And then there's three other values which are pretty useful. The next is space-around. Space-around, save, and refresh. Space-around puts them evenly along the horizontal axis with a same amount of space on the left and right of each grid item. Since they each have space on the left and right, you can see that this first one has space to the left and then it has the same amount of space on the right, but that's added together with the space on the left of the next grid item.
Since they're combined, that's why there's essentially a half sized space at each end. Another value here is space-evenly, save, and refresh. Now there's still space on either side of each column, but it's the same amount of space including at the ends, at the starting and ending edge of the grid. Then the last value here is space-between. So that takes away the space by the starting and ending edge of the grid, and it only gives you space in between the columns.
Those are all the options for justify-content. We're gonna change that back to auto, and look at the next property. So align-content does the same thing, but on the vertical axis. This only works if you give the grid a height so there's some empty space. Going back to the code I'm gonna add another line of css on line 14, min-height for the container of 90vh, and save, and refresh. So now they take up the full space.
Align-content: start; save, and refresh, and this moves all of the grid rows up to the starting edge of the grid container going vertically. I change that to end and save, and it moves them all down to the end. And then the value of center, refresh, and that moves them all to the center. The other three options are also the same as the options from justify-content.
Space-around, and that puts space around on both sides of each item. Space-evenly, and that puts space evenly, including at the start and the ending edge of the grid. And then space-between, and refresh, and that just has space between them and not at the starting and ending edge of the grid.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox