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

Add a third column for wider viewports - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

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…

Contents