Holy Grail Layout, The Old Friend

Last time I heard, one Rabbit of Caerbannog hasn't met The Holy Hand Grenade of Antioch

Correction By: Mark McClan

Tags:

BLOG

Hi there. Welcome to my first (somewhat) programming related blog. How long have you been using the internet? 5 years? 7 years? 20 years? if you've been on the internet for quite some time, you'll see a somewhat familiar layout here. The three column layout with a head and foot, or I usually call it the Unileg Humanoid-like Layout..I'm joking, please dont use that.

The Holy Grail layout coined by Eric Costello in 2008, according to Wikipedia, has been one of the most notable web layout for a long time. But, what makes it that way ?Well, back before modern css, making a consistent column especially with css was a real pain in the a.. um...head! Most of the time the columns end up different height or do not fit perfectly. Some techniques that work are usually too complicated or has a drawback to them. Thus...A quest for The Holy Grail had begun. But, I'm not here for a history lesson.

So, let's talk about how we create one. Let's start from today{today's - this relates to possetion, best to google the rules about it, but basically, today belongs (or relates) to standard, so it gets the 's added to it} standard for layout...yes, Grid and Flexbox. These 2, made the Holy Grail Layout not so special anymore. Why ?Because, how easy it is to implement. Yeah, just like every other valuable thing that lost its value when it become more accessible. But, the History will remain...We have wayback machine after all. Okay, back to the topic.

Grid

So. Grid. how ?As we know, Grid is capable of making a layout that can be dissected into a grid pattern, and our Holy Grail isn't an exception.

I'm sorry for the quality, but did you see it ?The grid pattern ?We can break the layout and then just merge the first and last rows! Yes, that is all it takes to make it. Now, start with the bare html.

<body>
    <header>Header</header>
    <nav>Nav</nav>
    <main>Main</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
</body>

Just simple html5 semantic tags, now onto the css. first thing todo set the display container to grid, then we mark the area of each cell that can be used later by our semantic tags.

body {
    margin: 0;
    display: grid;
    grid-template-areas: "h h h" "n m a" "f f f";
}

Then the size of each area, also set min-height to 100vh, to make sure the layout stretch all the way to bottom

body {
    margin: 0;
    display: grid;
    grid-template-areas: "h h h" "n m a" "f f f";
    grid-template-rows: 2rem 1fr 2rem;
    grid-template-columns: .3fr 1fr .3fr;
    min-height: 100vh;
}

Last thing to do is tell header and footer to take their place in grid, the rest will take available space automaticly. and lets add border while we at it

body > *{
    border: 1px solid #0003;
}

header{
    grid-area: h;
}

footer{
    grid-area: f;
}

we're done, that's it. here is the full code

Flexbox

Unlike Grid ultilizing 2 dimension table like pattern, flex is 1 dimensional. Working with flex means working with a flow and how the component interact with it. let's start with html since its a bit different than grid.

<body>
    Header
    
        Nav
        Body
        Aside
    
    Footer
</body>

See the difference ? the 3 column are wrapped inside another container, this container will responsible for horizontal flow of the 3. we'll add flex with vertical direction to the body, so our middle row able to stretch all the way down later. let's also add header and footer a height.

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

header, footer{
    height: 50px;
}

Now we'll add flex-grow to our middle component, to make it fill the space. by now nav main and aside still stack on top of each other, since flex will flow horizontaly by default, we dont need flex-direction here. and to put the cherry on top we'll also give a width to nav and aside then add flex-grow to main to it stratch horizontally filling up the remaining space.

#middle{
    flex: 1;
    display: flex;
}

aside, nav{
    width: 5rem;
}

main{
    flex: 1;
}

past here is the outdated method and please dont actually use them. what ? ooh yeah full code

Float

Ever use float ? hopefully the right way, and not like whay i will show you. Float are use for placing an element on the left or right side of the container, this behavior of float were used by some to create a column. we will use same html file used by grid above, now lets prepare the body before float anything

body{
    height: 100vh;
    margin: 0;
}

body > *{
    border: 1px solid #0003;
    box-sizing: border-box;
}

we dont want any floaties (the columns) clip with header and footer, so we'll apply clear both to them, dont forget the height. now set the columns(nav, main, aside)'s float to left, now the column are formed just add default width to nav and aside. we'll use some magic for the height using calc() function in css, by substracting 100vh with sum of header height and footer height. we'll do the same with main's width 100vw substracted by sum of nav and aside width.

header, footer{
    height: 50px;
    clear: both;
}

nav, main, aside{
    float: left;
    min-height: calc(100vh - 100px);
    width: 5rem;
}

main{
    width: calc(100vw - 10rem);
}

the result

Table

Last one, the no css way or i like to call it the please be kind to yourself and dont use this. the principle is same as grid, but instead we will use html table.. yes that html table, just create 3 by 3 table, colspan the entire column of the first and last row, set the width, done. i dont really think the sample code here will help, but if anyone wants result. and yes i'm using html4 for this

[Tutorial] Holy Grail Layout