#bolhadev • Linguagens De Programação • Matrix • Metas
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.
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.
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>
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>
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.
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%).
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.