From the course: Advanced Responsive Layouts with CSS Flexbox
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
What is the holy grail layout? - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
What is the holy grail layout?
- 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. Now, if you've ever worked with CSS columns before, you know that it's almost impossible to get columns to have equal heights using only CSS. To make the Holy Grail layout happen, you would either have to use JavaScript, or use some really convoluted CSS to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.