Learn how to change the flow of the grid and size implicit tracks.
- [Instructor] We've seen how to set the width of columns and the height of rows when we define them, but it's also possible to set the size of implicit tracks that we don't define. We're starting out here with three columns and two rows that we've defined as being 1fr wide and tall. Remember that we can tell the difference between implicit and explicit rows and columns by using the dev tools and looking at the lines between them. The dashed lines between the first two rows show us where the explicit rows are, while the dotted lines between the last rows show us that those are implicit rows.
The solid lines are around the grid. We can set the height for any implicit rows by using grid-auto-rows, that allows us to set a value of whatever height we want for all the implicit rows. For example, if we wanted to set all the implicit rows to be 70 pixels high, for the container element I would add a style of grid-auto-rows: 100 pixels and then save, go over here and refresh and now those three implicit rows at the bottom will all be 100 pixels tall.
If you wanted to give multiple values to the implicit rows such as alternating between 70 and 100 pixels in theory that's supposed to be possible with CSS, so for example if I change this from 100 pixels to 70 pixels 100 pixels, save and refresh and it actually doesn't work in Firefox. That's actually a bug and they're trying to fix it. It works in Chrome and other browsers and it's expected that it should work in Firefox sometime soon. So you can keep that in mind for later.
Going back for our grid-auto-rows in the code, I'm gonna change that to 1fr, so all the rows should have the same height depending on their content. So I save, go over here and refresh and now all of the rows, both the explicit rows and the implicit rows all have the same height which is the height that the fourth row needs to contain all of its content. By default when items are placed on a grid, they fill each row in turn going from left to right on the first row, and then left to right on each following row.
You can use grid-auto-flow to have it go by columns instead. So under the container element I'm gonna add a new property grid-auto-flow: column and then save, go over here and refresh and now you can see that the grid items are placed to fill each column in turn. They go down the first column, one, two, then down then ext one three, four, and so on. Additionally since we have more grid items than fit in the grid we defined, they create extra columns instead of extra rows, these extra columns are implicit columns and like with implicit rows we can use grid-auto-columns to set the width of the implicit columns.
Going back in the code I'm going to add grid-auto-columns: 1fr and save. Go over here and refresh and now all the columns are the same width to fill the width of the container. One last thing, you remember that we used grid-auto-flow for something different a few videos back. We gave it a value of dense so when we were placing grid items around the grid the rest of the grid items would fill in the empty spaces instead of leaving them empty.
These functions are related because they both have to do with how the grid items fill the grid. If you are using grid-auto-flow column in your CSS and you also want to use grid-auto-flow dense you can just combine them by adding a space and then the word dense and then you'll be getting both of those things. For example in my code on line 15, grid-auto-flow column dense and then both of those would apply.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox