Hacker Gaucho

#bolhadev • Linguagens De Programação • Matrix • Metas

"Holy grail layout" em CSS Flex e Grid

O holy grail ("santo graal") é o sonho dos webdesign desde o início da world wide web.

Sua simplicidade e praticidade batia de frente com as limitações impostas pelas tags do HTML e pelo CSS e suas variações entre diversos browsers.

Hoje em dia com o CSS3 criar um holy grail em CSS tornou-se algo trivial.

Anatomia do holy grail

O holy grail clássico tem o header, 3 colunas e o footer logo abaixo delas. As colunas tem um ajuste automático de altura, o que permite definir um background simétrico em todas elas.

Holy grail layout

Versão "old school"

A forma mais "old school" de se fazer um holy grail é usando a tag <table>:

<table width="100%" border="1">
<tr>
<td colspan="3"><h1>topo</h1></td>
</tr>
<tr>
<td width="25%">coluna da esquerda</td>
<td width="50%">coluna central</td>
<td width="25%">coluna da direita</td>
</tr>
<tr>
<td colspan="3">rodapé</td>
</tr>
</table>

Versão em CSS e HTML5

Antes mesmo do HTML5 surgir a tag <table> já havia perdido lugar na construção de layouts pela versatilidade do layout tableless feito com CSS.

Com aparecimento das tags semânticas a parte do HTML finalmente foi padronizada ficando mais ou menos assim:

<div class="container">
        <header><h1>topo</h1></header>
        <aside class="left-sidebar">coluna da esquerda</aside>
        <main>coluna central</main>
        <aside class="right-sidebar">coluna da direita</aside>
        <footer>rodapé</footer>  
</div>

Grid

Usando grid para as tags semânticas acima o código seria o seguinte:

#container{
    display:grid;
    grid-template-areas: 
        "header header header"
        "laside main raside"
        "footer footer footer";
    grid-template-columns: 25% 50% 25%;
}
#container > header{
    grid-area: header;
}
#container > .laside{
    grid-area: laside;
}
#container > main{
    grid-area: main;
}
#container > .raside{
    grid-area: raside;
}
#container > footer{
    grid-area: footer;
}

Repare que na propriedade "grid-template-areas" existe uma espécie de miniatura do layout.

Flex

Usando flex para as mesmas tags semânticas do exemplo acima o código seria assim:

#container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;    
}
#container > header{
        width: 100%;
}
#container > .laside{
        flex: 1;
        order: 1;
}
#container > main{
        flex: 2;
        order: 2;
}
#container > .raside{
        flex: 1;
        order: 3;
}
#container > footer{
        order: 4;
        width: 100%;
}

Repare que os valores da propriedade "flex" são múltiplos de 1/4 já que existem 3 colunas na linha e duas delas tem "flex" igual a 1 (25%), sobrando uma coluna central com "flex" igual a 2 (50%).

Conclusão

O grid além de exigir menos ginástica mental e decoreba tem uma sintaxe multilinha muito mais fácil de ser entendida logo de cara.