From the course: Responsive Layout

Unlock the full course today

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

Aligning tracks

Aligning tracks - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Aligning tracks

“

- [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…

Contents