From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Add a third column for wider viewports - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Add a third column for wider viewports
- [Instructor] This two column layout works fine for medium width viewports but I promised you a three column layout where the sidebar content moves up to the right hand column. So let's set that up. Actually adding the columns is easy enough, all we have to do is create a new media query for a wider viewport, and then change the site rule to have grid template columns set to three instead of two columns. So on the bottom here, I'll create a new media query, and I'll just set it to 65ems because I'm working on a really small screen here, and I'll create a new rule for sites, and inside that rule we'll call for grid template columns, 15em auto and 15em. So this will give us two fixed width columns, one on the left and one on the right, and then an auto-sized content area in the middle. Save this, go back in the browser and here we have the new column on the right hand side. But right now there's no content in it, not at the top, not at the bottom. To fix that we need to grab the two…
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
-
-
-
-
-
The challenge43s
-
Overview of the starting point2m 8s
-
Check for grid support1m 15s
-
Create the main grid3m 19s
-
Position items on the grid2m 16s
-
Add a third column for wider viewports5m 59s
-
Breaking the grid3m 55s
-
Justify the grid inside the grid container2m 30s
-
Use white space to perform magic6m 56s
-
-
-
-
-
-