From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Justify the grid inside the grid container - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
The challenge43s
-
Overview of the starting point2m 8s
-
(Locked)
Check for grid support1m 15s
-
(Locked)
Create the main grid3m 19s
-
(Locked)
Position items on the grid2m 16s
-
(Locked)
Add a third column for wider viewports5m 59s
-
(Locked)
Breaking the grid3m 55s
-
(Locked)
Justify the grid inside the grid container2m 30s
-
(Locked)
Use white space to perform magic6m 56s
-
(Locked)
-
-
-
-
-