Antes de começarmos sobre o assunto gostaria de deixar claro que o objetivo do post é mostrar diversas formas de projetar seu layout, ou seja, soluções que você pode levar aos seus clientes e não afetem o usuário final (pessoa que irá ver a página). Se você é iniciante agora na área e só ouviu falar de Grid layout e flexbox, gostaria que prestasse bem atenção no que vou dizer abaixo. Desde já agradeço por ter tirado alguns minutinhos de seu tempo para ler esse post .
Dias atrás observei em um grupo do Facebook a seguinte pergunta: “O que é mais profissional de usar Float, Flexbox ou Grid Layout?”, antes de dar a resposta gostaria de dizer que essa nossa web é incrível! A cada dia estamos vendo novidades que estão melhorando o nosso código e quando digo isso é sem que haja a necessidade de fazer gambiarras. Para que você possa entender bem irei explicar o que cada propriedade faz e sobre seu suporte nos navegadores.
Float:
Está propriedade foi criada no CSS1 e destina-se o posicionamento dos blocos. Alguns Frameworks CSS como Bootstrap usavam o float até a versão 3.8, logo depois com a mudança de seu pré-processador Less para Sass, os desenvolvedores acharam também interessante sair do float para flex-box. Os valores mais usados no float são: left, right, none e page-floats, abaixo um exemplo de uso.
H1{float: right;}Flexbox
O Flex-box é uma propriedade criada no CSS3. Com o objetivo de posicionamento dos blocos, mas porem sem o uso de float, resolvendo problemas de box-model e largura dos elementos das páginas. A base do Flexbox é o posicionamento em qualquer lugar da página fora a flexibilidade ao se adaptar em diferentes telas. As vantagens de usar Flexbox são grandes se comparadas ao float e uma delas é um bom SEO e até mesmo acessibilidade. Abaixo um exemplo de uso de flexbox.
<main class=”main”>
<article></article>
<article></article>
<article></article>
</main>
.main{
display: -webkit-flex;
display: flex;
}
.main article{
background-color: crimson;
margin-right: 1em;
}
Grid-Layout
Está especificação foi criada para que possa ser feito layouts com método bidimensional. Isso possibilita a criação de itens da página a partir de linhas e colunas. O Grid layout já é suportado por vários navegadores, você pode conferir o suporte do Grid layout aqui. Abaixo você poderá ver um exemplo de uso de layout com Grid Layout.
<div class="grid-container">
<header class="grid-item header">Header</header>
<nav class="grid-item nav">Nav</nav>
<main class="grid-item content">Content</main>
<aside class="grid-item aside">Aside</aside>
<footer class="grid-item footer">Footer</footer>
</div>html, body {height: 100%;}
.grid-container {
margin: 0.35rem;
height: calc(100% - 0.71rem);
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 20% 60% 20%;
grid-gap: 0.71rem;
grid-template-areas:
"header header header"
"nav content aside"
"footer footer footer";
}
@media(max-width: 42.14rem) {
.grid-container {
grid-template-columns: 25% 75%;
grid-template-rows: 20% 10% 50% 20%;
grid-template-areas:
"header header"
"nav nav"
"content aside"
"footer footer";
}
}
@media(max-width: 32.14rem) {
.grid-container {
grid-template-columns: 100%;
grid-template-rows: 20% 10% 10% 50% 10%;
grid-template-areas:
"header"
"nav"
"content"
"aside"
"footer";
}
}
.grid-item {
border-radius: 0.57rem;
color: #fff;
font-size: 1.43rem;
padding: 0.71rem;
text-align: center;
}
.header {
background: #f44336;
grid-area: header;
}
.nav {
background: #2196f3;
grid-area: nav;
}
.content {
background: purple;
grid-area: content;
}
.aside {
background: #8bc34a;
grid-area: aside;
}
.footer {
background: #333;
grid-area: footer;
}
Então qual usar?
Como disse lá no início toda essa evolução da web é incrível, mas infelizmente nosso cliente e o usuário não estão ainda acompanhando 100% dessa evolução! Não basta apenas pensar na facilidade em desenvolver, mas também devemos pensar se a solução será boa para o nosso usuário. Afinal o site não é pra você e sim para seu cliente e que infelizmente pode acontecer do navegador do computador dele não está atualizado. Claro não estou falando pra evitar usar as novas tecnologias, mas sendo você o desenvolvedor responsável por fazer expandir uma ideia ou negócio, você tem que pensar até quatro vezes antes de escrever um código, pois, várias pessoas irão acessar o layout que você desenvolveu.
Qual a solução para isso?
Certamente você está um pouco confuso essa altura não é? Bom não se preocupe para todo problemas existe solução! A solução para isso nada mais que é uma página Fallback, se o navegador não aceitar uma especificação como Grid layout, então ele irá ler o código que você escreveu e que é suportado na versão antiga do navegador ou mesmo a mais recente que sim pode acontecer que não tenha ainda um suporte. Se você já conhece o Fallback pelo HTML5 e JS isso já não é nenhum segredo srsr.., para finalizar gostaria de dizer que a Web é para todos! Não pense em fazer um site onde só quem entende muito de computador acessa, faça um layout que faça sair o produto da prateleira. Espero que tenha gostado do post desde já sucesso em seus projetos e um grande abraço .
