Portal GSTI
Portal GSTI

PublicarCadastre-seLogin
Menu
Publicação

Afinal o que usar float, flexbox ou Grid Layout?

foto de
Andre Laurentino CONTEÚDO EM DESTAQUE


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  .



Comentários