From the course: CSS: Advanced Layouts with Grid

Unlock this course with a free trial

Join today to access over 24,300 courses taught by industry experts.

Justify the grid

Justify the grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

Justify the grid

“

- [Instructor] This layout we've created is restricted to 80% of the viewport width until we get up to our first media query, or see, right there, where we're overriding that restriction. Now this layout will continue to be full width, no matter how wide the viewport gets, and that might be what you're going for, or it might not be. And this lesson, I wanted to show you an interesting way to restrict the max width of a grid layout without using traditional methods. And then I'll show you how to justify the entire grid container. So let's head to our style sheet. To start with the width restriction, let's go to our media query for this 1100 pixels, and instead of the center column taking up 1fr, let's change this to minmax. We'll say auto, 30em. So this says, at a minimum, this column width can auto size itself, but at a maximum it should never be more than 30ems. So let's reload this, and we need to go above 1100 pixels to get to that break point. There we go. So now we see in our…

Contents