CSS Grid Layout Guia introdutório
Eae? Tudo bele?
Hoje trago um assunto que poderá mudar a forma de enxergarmos a construção de layouts web. Falo do CSS Grid Layout.
Para quem desenvolve a algum tempo basta olhar para o passado para enxergar alguns modelos que não foram criados de forma específica para esta função, como por exemplo, o uso de tabelas.
Já o CSS Grid Layout fornece uma nova forma mais interessante e natural de fazer layouts avançados facilmente sem apelar para modelos não adequados.
Neste guia vou apresentar esta nova forma de criar layouts em CSS. E para você ter seu primeiro contato com este recurso trarei alguns exemplos de aplicações. Ok?
Então, sigam-me os bons!
O que é CSS Grid Layout?
CSS Grid Layout é um sistema bidimensional de layout baseado em grid que permite lidar com colunas e linhas, que segue a especificação da W3C. Também é considerado o primeiro módulo CSS criado especificamente para resolver os problemas de layout que muitos de nós já lidamos no passado.
E o que tínhamos antes?
Historicamente começamos o processo de construção de layouts com tabelas e usamos recursos CSS como floats, posicionamentos, inline-blocks, entre outros. Porém na essência estes métodos eram considerados hacks. Mais tarde surgiu o Flexbox, e é ele que mais se aproxima do CSS Grid Layout.
Layout Flexbox versus CSS Grid Layout
O Flexbox destina-se a layouts unidimensionais mais simples que possam ser dispostos em linha reta. É mais apropriado para os componentes de um aplicativo e layouts em pequena escala.
Já o CSS Grid Layout destina-se a layouts bidimensionais mais complexos. É adequado para organizar a estrutura de layout de elementos de nível mais alto, como cabeçalhos, rodapés, sidebar e seções.
Portanto a grande diferença então entre os dois é que Flexbox é essencialmente para a colocação de itens em uma única dimensão (em uma linha ou uma coluna). E CSS Grid Layout é para layouts de itens em duas dimensões (linhas e colunas).
Agora que você agora já sabe que este sistema pode ser a solução para problemas corriqueiros na construção de layouts sem uso de hacks, uma questão que devemos nos preocupar é o suporte aos navegadores.
Suporte a navegadores
Conforme as atualizações forem surgindo vou deixando este artigo em ordem, mas no atual momento (abril de 2017) a maioria dos navegadores modernos suportam o CSS Grid Layout conforme podemos ver no suporte Can I Use. Entre os mais famosos o IE 11 tem suporte parcial utilizando-se o prefixo –ms.
Terminologia
Agora vamos conhecer os termos envolvidos para este módulo antes de passarmos para os exemplos práticos. Isso será necessário para entendermos conceitualmente seus significados.
Grid Container
É o pai direto de todos os itens do grid e elemento em que display: grid é aplicado. Veja a seguir que a class “container” será responsável para atribuir o valor grid ao elemento pai.
HTML:
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div>
CSS:
.container { display: grid;}
Visualmente é toda área que contém as linhas e colunas, como você pode ver a seguir:
Grid Line
Corresponde as linhas divisórias que compõem a estrutura do grid. Temos dois tipos:
As linhas verticais (que formam as colunas do grid) e as horizontais (que formam as linhas do grid).
Na imagem a seguir identificamos as linhas verticais indicadas pelas setas vermelhas e horizontais pelas setas laranjas.
Grid Item ou Grid Cell
Refere-se aos elementos descendentes diretos do contêiner onde o grid é aplicado. É a menor unidade do grid. Veja no exemplo a seguir:
Podemos notar que o Grid Item está entre as Grid Lines de linha 1 e 2 e as Grid Lines de coluna 2 e 3.
Como já frisei somente um elemento filho direto pode ser um Grid Item. No exemplo a seguir o elemento que recebe a class “sub-item” não poder ser um Grid Item (“sub-item” somente será um Grid Item se seu elemento pai “item” receber display: grid;):
<div class="container"> <div class="item"></div> <div class="item"> <p class="sub-item"></p> </div> <div class="item"></div></div>
Grid Tracks
É o espaço horizontal ou vertical entre duas Grid Lines.
Grid Areas
É o espaço total que contornado por quatro linhas de Grid e pode ser composto por qualquer quantidade possível de Grid Cells/Grid Items.
Noções básicas
Para trabalhar com CSS Grid Layout se aplica CSS tanto para um elemento pai que se torna o contêiner quanto para os elementos filhos que se tornam itens Grid.
No contêiner você define a grid com display: grid e também os tamanhos de coluna e linha com grid-template-columns e grid-template-rows, em seguida, coloca seus elementos filho no grid com grid-column e grid-row.
No contêiner também é possível usar declarações com display: inline-grid, que gera um grid com comportamento de linha, e display: subgrid, que é usado quando seu grid está aninhado dentro de outro grid. Logicamente que display:block gerará um grid com comportamento de bloco.
Exemplos
A seguir vou disponibilizar alguns exemplos usando o JSFiddle. Para melhor entendimento você pode navegar entre as aba result, HTML e CSS para ver o aspecto visual dos Grids e a codificação usada.
Exemplo 1:
Você também pode ver esta demonstração ampliada clicando aqui »
Neste exemplo setamos a propriedade display para o valor grid para a div com a classe “container”. Em seguida dividimos o Grid em 3 colunas e 2 linhas resultando em 6 Grid Items. Repare que a largura das colunas tem tamanho igual e isso acontece também com a altura das linhas. Esse resultado foi obtido porque usamos o valor 1fr para cada coluna e para cada linha. 1fr é uma fração do espaço livre dentro do grid nas propriedades grid-template-columns e grid-template-rows. No exemplo, como estamos usando três colunas a declaração CSS pega o valor total disponível da largura que é 100% e divide por três partes iguais. O mesmo ele faz com a altura total resultando em 1 fr de 50% para cada linha.
Além do valor 1fr você pode definir largura e altura (Grid Tracks) com pixels, porcentagem, viewport hight ou viewport width.
Exemplo 2:
No exemplo anterior conseguimos posicionar de forma simples cada Grid Items. Entretanto também é possível posicioná-los manipulando as Grid Lines com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end. Basta você saber atribuir corretamente os números de linha inicial e final a essas propriedades. Além destes as versões shorthand grid-column e grid-row também executam o posicionamento.
Olhando para o exemplo anterior, é assim que o navegador posiciona os elementos por padrão para nós:
.item-1 {grid-column-start: 1; grid-column-end: 2; grid-row: 1; background-color:#fd7701}.item-2 {grid-column-start: 2; grid-column-end: 3; grid-row: 1; background-color:#fe861d}.item-3 {grid-column-start: 3; grid-column-end: 4; grid-row: 1; background-color:#ff9538}.item-4 {grid-column-start: 1; grid-column-end: 2; grid-row: 2; background-color:#fea354}.item-5 {grid-column-start: 2; grid-column-end: 3; grid-row: 2; background-color:#feb474}.item-6 {grid-column-start: 3; grid-column-end: 4; grid-row: 2; background-color:#ffcca0}
Agora vamos utilizar essas declarações alterando o código do exemplo anterior no JSFiddle.
Você também pode ver esta demonstração ampliada clicando aqui »
Logicamente que visualmente não se mudou nada. Entretanto vemos a alteração na aba de CSS. E conhecer essa novas propriedades vai ser útil para o próximo exemplo.
Exemplo 3:
Uma das grandes novidades do CSS Grid Layout é que não importa a ordem que vem os elementos HTML do seu grid, você pode altera-las como bem desejar. É o que vamos fazer agora mudando as Grid Lines do exemplo anterior.
Você também pode ver esta demonstração ampliada clicando aqui »
Veja o poder desse módulo em suas mãos. Com apenas algumas mudanças de linhas em seus CSS você pode fazer uma alteração rapidamente em seu layout.
O que feito neste exemplo? Veja explicação comparando com o exemplo anterior:
- Invertermos Os Grid Items 1 e 6 em relação a linha vertical e posicionamo-los na coluna central;
- O Grid Item 2 foi para coluna 3, linha 1 através de grid-column-start: 3, grid-column-end: 4 e grid-row: 1;
- O Grid Item 3 foi para coluna 1, linha 1 através de grid-column-start: 1, grid-column-end: 2 e grid-row: 1;
- Já o Grid Item 4 foi para coluna 3, linha 2 através de grid-column-start: 3, grid-column-end: 4 e grid-row: 2
- E o Grid Item 5 foi para coluna 1, linha 2 através de grid-column-start: 1, grid-column-end: 2 e grid-row: 2.
Exemplo 4:
Este exemplo demonstrará o posicionamento de Grid Items através de nomes de áreas, as chamadas Grid Areas. Podemos nomear uma área de grade usando a propriedade grid-template-areas, então podemos colocar um item de grid em uma área específica usando a propriedade grid-area. Veja no exemplo a seguir:
Você também pode ver esta demonstração ampliada clicando aqui »
Exemplo 5:
Para encerrar os exemplos vamos mostrar um um pouco mais complexo em relação aos anteriores com inserção também de outros elementos HTML com listas e parágrafos.
Você também pode ver esta demonstração ampliada clicando aqui »
Como você pode ver no bloco anterior construímos um esboço de uma página com topo, sidebar com navegação, área de conteúdo e rodapé. Foram usados elementos do HTML5 para dar semântica aos blocos e como no exemplo anterior foram usados Grid Areas.
Em relação aos exemplos anteriores temos duas novidades:
Uma é o uso de áreas de respiro (gaps) entre os Grid Items através das propriedades grid-column-gap e grid-row-gap e o grande destaque neste exemplo que o uso de um grid dentro de outro.
Note que a grande área cinza escura corresponde ao grid principal. Olhando o CSS vemos que a class “container” recebe “display: grid” que é responsável por atribuir características de grid ao bloco. Veja também que existem blocos de cor azul que estão inseridos dentro de um bloco de cor cinza mais claro. Este bloco também está recebendo “display: grid” e está aninhado no bloco de class “container”. Identificamos este grid interno no CSS como a class “wrapper”.
Portanto uma das possibilidades do CSS Grid Layout é trabalhar com grids aninhados. E isso com certeza é mão na roda!
Conclusão
Como podemos ver o CSS Grid Layout pode ser uma revolução no modo de desenvolver layouts comparando-se com outros métodos. E você pode fazer seus primeiros testes nos navegadores que já dão suporte a esta tecnologia. O objetivo deste artigo foi dar uma pincelada sobre aspectos introdutórios deste sistema. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.
Em breve notaremos o crescimento deste módulo. Sugiro que observe a evolução de uso nos grandes portais, templates de grandes CMSs como o WordPress, Drupal e Joomla e nas discussões na comunidade web em geral.
E você? O que achou do CSS Grid Layout? Já utiliza em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!
Forte abraço.
Até mais.
Referências
https://css-tricks.com/snippets/css/complete-guide-grid/
http://codepen.io/simoneas02/post/grid-layout
https://www.sitepoint.com/introduction-css-grid-layout-module/
http://gridbyexample.com/examples/
https://drafts.csswg.org/css-grid/
http://codepen.io/simoneas02/post/grid-layout#sim-mas-devo-usar-flexbox-ou-grid-layout-3
The post CSS Grid Layout – Guia introdutório appeared first on Chief of Design.
CSS Grid Layout – Guia introdutório Publicado primeiro em https://www.chiefofdesign.com.br/
Comentários
Postar um comentário