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.

Position items on the grid

Position items on the grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Position items on the grid

“

- [Instructor] With the grid in place, we can start placing the grid items where we want them to appear. Just to remind you, I want the header to appear here where it is right now on the left hand side, then the feature image and the main content, which is currently in the first column, in the second column. Because we're currently looking at the two column layout, I also want the sidebar content here to appear in this second column and at the very bottom, I want the footer to appear across both columns. To do this, I first need to visualize my grid, so I'll open my developer tools, go to the layout panel, check the body site grid so I can see the overlay and make sure display line numbers is checked as well so I can see the line numbers. Now I can position all my contents based on these line numbers which is one, two and three because we're working with a two column grid. The items I want to place are the direct descendants of the body with a class site, so these would be the header,…

Contents