From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Justify the grid inside the grid container

Justify the grid inside the grid container - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Justify the grid inside the grid container

“

- [Instructor] This three column layout we've created right now is full width, and will continue to be full width regardless of how wide the viewport is. In some cases that is what you want. In other cases it's not. So what do you do if you want to restrict the max width of this grid layout without using traditional methods? This is where things get really interesting. The grid layout module spec inherits a bunch of functionality from the flex layout module, or flex box. And one of those functionalities is the ability to justify the content left, or right or center. So check this out. If I want to restrict the total width of my grid, all I need to do is go into my media query here at 65, and instead of having the middle column set to auto, I'll set it to 30ms. Or even better, I'll set it to min max auto 30ms. So that way at the most, the middle column will be 30ms wide. In my browser you can now see the content is being restricted to that width, and right now because I haven't set…

Contents