From the course: CSS: Advanced Layouts with Grid

Overview of the starting point - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Overview of the starting point

- [Instructor] In the exercise files for this movie, you'll find the baseline HTML document and styles for our three column layout. If you open this in the browser, you'll see that right now we are looking at the fallback layout for the site. So this is the mobile layout just scaled up to fit a wider screen. I've done that by restricting the max width of all the content, and when you scroll down you just see all the content as stacked one piece after the other in a vertical stack. All this content is fully accessible, easy to read and easy to maintain, but it is not being displayed in a three column layout. That's what we want to do here. To start off let's take a quick look at the HTML documents here to understand the structure. We start out with this body that has the class site, and currently this is what is being used in the style sheet to restrict the width and also central line all the content. It's done right here in the style sheet. Next we have a skip to content link. This link is absolutely positioned off screen and only appears if you use the Tab key to tab through things in the page. This is for accessibility, and it's a requirement for this page to pass accessibility tests. It's also irrelevant to our conversation because once you position an element either absolutely or fix it, it's taken out of the context of the grid. So it will not be placed on the grid. Next we have a series of first level children of the body element. First one is header, that displays a logo and site title. Then we have a figure with a class feature that displays an image. There's a main, with a series of sections inside it including splash, buckets and more. Then we have an aside with a class sidebar, that has two elements inside, both with the classes twin. And finally we have the footer. In my layout what I want to do is move the header over to the left hand side in the first column. Then display all the main content here in the second center column, and display this sidebar content here over in the third column. And then have the footer span the full width of the screen. We can do all this by defining a grid on the main container, in this case that would be the body element with the class site.

Contents