From the course: Level Up: CSS Layout

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Holy grail layout

Holy grail layout - CSS Tutorial

From the course: Level Up: CSS Layout

Start my 1-month free trial Buy for my team

Holy grail layout

“

- [Narrator] Before the introduction of the CSS grid and flex modules, there was a layout, colloquially referred to as the holy grail, because it was impossible to achieve. In this challenge, you'll build the modern responsive version of that holy grail layout. This layout has a header across the entire top, then a nav bar on the left hand side, content in the center, a sidebar on the right hand side, and a footer across the entire bottom. The sidebars and main content have the same height, and the layout takes up to full width, and at least a full height, of the view port. Now, to add a bit more of a challenge to this challenge, you'll also use a width based media query to trigger the holy grail layout, and create an intermediary layout for the view port widths, where two sidebars take up too much space. You can see that here, when I reduce the view port width, that the menu bar on the left hand side will eventually…

Contents