vue
Criando um componente com Vue.js
18 de setembro de 2017
Widgets WordPress
Novos Widgets WordPress
22 de setembro de 2017

Grid Layouts – mude sua forma de criar layouts web

No sábado passado, dia 16/08/2017, participei do Front in Vale, o maior evento de Frontend do Vale do Paraíba. Na primeira palestra tive a imensa alegria de presenciar um dos ícones do desenvolvimento frontend brasileiro, o Maurício Samy Silva, mais conhecido com Maujor. Este cara fantástico, que me ajuda desde o início dos meus estudos (lá para 2003, 2004), ensinou uma forma fantástica de desenvolver layouts web, o Grid Layout.

Fique por dentro do conteúdo do blog sobre css clicando aqui!!!

O que é Grid Layout

A documentação do site da Mozilla Developers destaca que o Grid Layout prevê funcionalidades para criação de um sistema de grid bi-dimensional para layout CSS. Grids que podem usados para “layoutar” tanto as grandes regiões de uma página como os pequenos elementos de uma interface de usuários.

Resumindo, ele é um sistema de grids de linhas e colunas que podemos utilizar para desenvolver layouts de forma bem mais rápida e com muito, mas muito menos códigos. 

Vantagens de usar Grid Layouts

Você pode dizer que já utiliza recursos de grid para seus layouts, mas tenho certeza que o recurso de Grid Laytou traz muitas vantagens.

Dimensões fixas ou flexíveis

Você pode criar grids com dimensões fixas – por exemplo: definindo dimensões em pixels. Ou criar grids com dimensões flexíveis definindo-as com uso de porcentagem ou da nova unidade CSS fr criada para esse propósito.

Posicionamento de itens

Você pode posicionar com precisão itens de uma página usando o número que define uma linha do grid, usando nomes ou ainda fazendo referência a uma determinada região do grid. Existe ainda um algorítmo de controle do posicionamento de itens da página que não possuem uma posição capaz de ser explícitamente definida no grid.

Criação de grids adicionais

Além da possibilidade de se criar um grid inicial para o layout a Especificação prevê também a possibilidade de se adicionar linhas e colunas para layoutar conteúdos adicionados fora do grid inicial. Funcionalidades tal como adicionar “tantas colunas quanto necessárias em um grid container existente” Fsão previstas nas Especificações.

Alinhamento

Estão previstas funcionalidades de alinhamento que possibilitam controlar o alinhamento dos itens de uma página posicionados no grid e também o alinhamento do prórpio grid como um todo.

Controle sobre conteúdos sobrepostos

Em uma célula do grid podem ser posicionados mais de um item da página e também é possível que se defina sobreposição parcial de áreas. Esse controle de layers é feito com uso de z-index.

CSS Grid Layout é uma poderosa Especificação que se for combinada com outras Especificação das CSS, tal como flexbox, possibilita a criação de layouts que até então eram impossíveis de serem criados com CSS. Tudo começa com a criação de um grid dentro de um grid container.

Exemplo da utilização do Grid Layout

Neste exemplo eu utilizei um pouco do que aprendi como Maujor e do que aprendi lendo a documentação do Mozilla Developers. Vamos criar um layout com as seguintes seções:

  • header
  • nav
  • main
  • section
  • aside
  • article
  • footer

Nossa estrutura html ficará assim:

<div class="wrapper">
   <header>Header</header>
   <nav>Menu</nav>
   <main>
      <section>Bloco da esquerda</section>
      <section>Bloco central</section>
      <section>Bloco da direita</section>
   </main> 
   <aside class="left">Sidebar left</aside> 
   <aside class="right">Sidebar right</aside>
   <article class="left">Article left</article>
   <article class="right">Article right</article>
   <footer>Footer</footer>
</div>

No CSS, declararemos a propriedade display: grid na classe wrapper. Depois, com a propriedade grid-template-columns, definiremos a quantidade de colunas (12 no nosso caso) e sua largura. Usaremos a unidade de medida fr, uma nova unidade que representa uma fração do espaço disponível no container do grid, no nosso caso, a div wrapper. Em seguida usaremos a propriedade grid-template-rows para definir as alturas das nossas colunas.

Com a propriedade grid-row-gap nós definimos o espaçamento entre as colunas, e com a propriedade grid-row-gap, o espaçamento entre as linhas.

Nossa div wrapper ficará como mostra o código abaixo.

.wrapper{
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: 50px 50px 100px 300px 200px 50px;
   grid-column-gap: 10px;
   grid-row-gap: 1em;
   text-align: center;
}

Legal! Agora, tomaremos como exemplo o nosso header. Nele usaremos propriedades do Grid Layout para declarar em que linha e coluna nosso header deve começar e terminar. Como quero que o header ocupe toda a largura da div wrapper, seu start será na coluna 1 e seu end na coluna 13 (final da coluna 12). Ele iniciará na linha 1 e irá até a linha 2.

Nosso header ficará como mostra o código abaixo.

header { 
   background: red; 
   grid-column-start: 1; 
   grid-column-end: 13; 
   grid-row-start: 1; 
   grid-row-end: 2; 
}

As demais seções do site devem seguir o mesmo exemplo, com a diferença de que a seção main conterá três sections dentro dela, então ela terá uma configuração adicional, recebendo as propriedades display: grid e grid-template-columns: repeate(3, 1fr).

main { 
   background: grey; 
   grid-column-start: 3; 
   grid-column-end: 11; 
   grid-row-start: 3; 
   grid-row-end: 4; 
   display: grid;
   grid-template-columns: repeat(3, 1fr); 
}

Abaixo você confere todo o código de nosso layout.

See the Pen Exemplo de grid layout by Rodrigo Zan (@rodrigozan) on CodePen.

Espero que tenham gostado e este exemplo ajude em seus futuros layouts, poupando um pouco o trabalho que a criação de layouts proporciona, com floats, clear:both e etc.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *