From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Grid flow and implicit tracks

Grid flow and implicit tracks - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Grid flow and 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…

Contents