Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.2 hours
Grid 3
  • Overview
  • Transcript

3.3 Holy Grail Layout

The “Holy Grail Layout” is a layout problem web designers have been trying to solve since back in 2001, to the point that it’s something of a yardstick against which layout systems are measured.

Some solutions are lengthy and complex, some are less so, but postcss-ant brings a new, elegant and concise method to the table. Let’s check it out in this lesson.

Related Links

3.3 Holy Grail Layout

Hey, welcome back to Grids and Layout Tricks with postcss-ant. In this lesson, we're gonna be going through using postcss-ant to produce what's called the Holy Grail layout. I've included a link to the wiki entry on the Holy Grail layout. It's worth having a read through so you can get a bit of an overview of why this is relevant. Basically it's a tricky lay up problem, and it's one that people have come at from different angles over the years. Basically what it is, is this layout here. So you have a header, a main area, and a footer in your main area. You've got a left side bar, a content area, and a right side bar. And the design is always 100% height and 100% width. So as well as having those elements in these to be completely flexible, and when it resizes the footer needs to stick to the bottom, and the side bars need to stick to the outer edges. So let's see how we can take advantage of processes and to facilitate this Holy Grail layout. In our style.css file here, we've just changed the padding down to zero so that we can have the elements flushed with the outer edges. And in our HTML, we've got div for the class holy_grail, inside that we've got a Header and a Footer element, and then we have a main element. Within that we've got our Sidebar for the left. A section for the middle, and aside for the right. So you can grab that code from your source files. The first step that we're gonna take towards this layout solution, is we're going to create a grid out of these three elements here. So we're gonna generate a grid against the main element. So we'll create a main element style. And we're gonna generate a grid. Set up our columns. And we're gonna set them up as 20% for the first Sidebar, and auto size for the middle area, and 20% for the right Sidebar. So that's the first piece of the puzzle out of the way. Next we're gonna generate a grid control our three rows here. So this time we're gonna be targeting the parent element, which is the element with the class, holy_grail And we're going to generate another grid. This time all the columns here are just gonna be 100% width, so we're not even going to include the column method. What we're gonna do is include the rows method. We're gonna set out header to be 100 pixels high. We're gonna set the middle area to be border in its height. And we'll set the footer to also be 100 pixels high. So we'll apply that, and you notice right away that that's kind of messed up our design. You might remember that postcss-ant works with Flexbooks by default. So what we can actually do, knowing that this has Flexbox applied to it, is just change the flex direction. To column. And now that puts all of our rows in the order that we want them again. The next thing we've got going on here is some gutters in between each of our rows, we don't want the others. So what we need to do is set our gutters to 0. So now that this class almost finished, there's just one more thing that we need to do. And that is, because we need to make sure that our layout fills up the entirety of our height, we need to make sure that our parent element, this holy_grail class, has a minimum height of a 100%, or of a 100vh, so a 100 viewport height units. And we haven't seen that expanded full height yet, and that's because there's one more line of code that we need to add to make this work. And that is just to set the main element to flex-grow: 1. And what that means is our main element in the middle here has had growing switched on. So it's gonna take the opportunity to increase itself to the maximum height that it possibly can. Because we've already use generate grid on our main element here, Flexbox is already active, so we can just use this Flexbox setting without any other code. So now let's see that. All right, and just like that. That's our holy_grail layout, complete. So everything stretches to fit, no matter how big our screen is. We've got our sticky footer at the bottom, and everything's working perfectly. And we've done that with just five lines of code. I definitely recommend having a look around at some of the other solutions the holy_grail layout. And while this does compile into more code, as far as the code that you actually have to think about and write yourself, you find that this is a very efficient way of tackling this classic layout problem. Now we've got just one more lesson that we're gonna cover on working with working with postcss-ant. And in that lesson we're going to mix a bit more of the power of preprocessors in with postcss-ant, so that we can see some examples of the kind of things that you can achieve when you bring these two together. We're gonna be creating a display of social icons that's gonna be totally fluid in size. They'll be adjustable, they'll be able to fit their parent container. They'll also be able to maintain that aspect ratio no matter what size they're coming out. And at the same time, you're also gonna be able to change mind and change the number of icons that you have behaving in this way, at any given time without having to recalculate any math. So you're gonna learn how to do that in the next lesson. I'll see you there.

Back to the top