Join Morten Rand-Hendriksen for an in-depth discussion in this video What is the holy grail layout?, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- In web design, there's this layout that's referred to…as the Holy Grail.…It's called the Holy Grail because it's a great idea,…but up until now, it's been pretty much impossible…to actually attain.…The Holy Grail layout looks something like this.…You have a header that spans the full width of the screen.…Then you have a main content area…that also spans the full width of the screen,…but what makes this a Holy Grail layout…is that there's several columns…within this main content area,…and all of these columns have the same height.…On the bottom, we also have a footer…that again spans the full width of the screen,…and if you changed a content…within any one of these columns,…the other two columns will increase in height as well.…
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content