Olá! Aqui é o Ed Francisco e 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.
Então começaremos aqui uma série, dividida em 3 artigos, onde eu vou apresentar esta nova forma de criar layouts em CSS. E para você ter seu primeiro contato com este recurso nesta primeira parte falarei sobre a terminologia, e sobre algumas propriedades e unidades básicas em exemplos introdutórios. Ok?
Procure seguir cada linha de código exposta para plena compreensão.
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.
E antes de prosseguir com o conteúdo quero te informar que se você deseja aprender CSS Grid Layout, o Chief of Design oferece conteúdo em vídeo sobre essa ferramenta no Curso em Vídeo de Fluência em HTML & CSS. Dê uma conferida!!!
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 (Dezembro de 2018) 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 de Grids básicos
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 – Larguras de Colunas e alturas de Linhas em pixels
Código HTML:
<div class="container"> <div class="item-1 box">Grid Item 1</div> <div class="item-2 box">Grid Item 2</div> <div class="item-3 box">Grid Item 3</div> <div class="item-4 box">Grid Item 4</div> <div class="item-5 box">Grid Item 5</div> <div class="item-6 box">Grid Item 6</div> <div>
Código CSS:
.container {
display: grid;
grid-template-columns: 269px 269px 269px;
grid-template-rows: 50px 50px;
}
.box {
background-color:#f06923;
color: #fff;
padding: 1em;
text-align: center;
}
.box:nth-child(even) {
background-color:#34a6db;
}
Agora vamos ver no JSFiddle.
Antes de qualquer coisa quero falar sobre o comportamento padrão de um Grid Container. Observando o Grid vemos que o primeiro elemento (Grid item 1) ele se posiciona na primeira linha e na primeira coluna, e os elementos que vem a seguir devem se posicionar sequencialmente na primeira linha enquanto existir o número de colunas estipulados. E quando for atingido o número de colunas o Grid item prossegue automaticamente para próxima linha e assim por diante.
Na class “container” dentro do código CSS estipulamos os tamanhos de linhas e colunas através grid-template-columns e grid-template-rows. Em grid-template-columns colocamos 3 valores, com espaços entre eles, de 269 pixels de largura, o que nos leva a concluir que cada valor inserido corresponde a uma coluna, o que resulta em um grid de 3 colunas.
Em grid-template-rows foram colocados 2 valores de 50 pixels de altura, o que nos leva a concluir que cada valor inserido corresponde a uma linha, portanto o grid contém 2 linhas.
Outras coisas podemos concluir sobre esse grid. Primeiro que cada Grid Item tem 269 pixels de largura e 50 pixels de altura. E segundo, pelo fato de todas colunas terem as mesma largura e as linhas também, que todos Grid items são iguais, possuem a mesma área. Mas isso nem sempre vai ser assim.
No exemplo a seguir irei mostrar um grid com colunas e larguras com dimensões diferentes e também usando outras unidades de tamanho que também é possível para grid-template-colums e grid-template-rows.
Exemplo 2 – Larguras de Colunas e altura de Linhas em outras unidades e com dimensões diferentes
Código HTML:
<div class="container"> <div class="item-1 box">Grid Item 1</div> <div class="item-2 box">Grid Item 2</div> <div class="item-3 box">Grid Item 3</div> <div class="item-4 box">Grid Item 4</div> <div class="item-5 box">Grid Item 5</div> <div class="item-6 box">Grid Item 6</div> <div>
Código CSS:
.container {
display: grid;
grid-template-columns: 269px 25% 337px;
grid-template-rows: 5rem 50px;
}
.box {
background-color:#f06923;
color: #fff;
padding: 1em;
text-align: center;
}
.box:nth-child(even) {
background-color:#34a6db;
}
Agora vamos ver no JSFiddle.
Como podemos ver no JSFiddle acima os Grid items não são iguais como no exemplo anterior. Eles possuem áreas de tamanhos diferentes e isso é bastante comum em elementos que formam um layout.
E quanto as unidades de dimensões você pode usar as unidades comuns para width e height como pixels, porcentagem, rem, em, viewport height, viewport width, etc.
No próximos exemplos você vai conhecer outras unidades para dimensões de Grid items.
Exemplo 3 – Unidade fr
Código HTML:
<div class="container"> <div class="item-1 box">Grid Item 1</div> <div class="item-2 box">Grid Item 2</div> <div class="item-3 box">Grid Item 3</div> <div class="item-4 box">Grid Item 4</div> <div class="item-5 box">Grid Item 5</div> <div class="item-6 box">Grid Item 6</div> <div class="item-7 box">Grid Item 7</div> <div class="item-8 box">Grid Item 8</div> <div class="item-9 box">Grid Item 9</div> <div>
Código CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 2fr;
}
.box {
background-color:#f06923;
color: #fff;
padding: 1em;
text-align: center;
}
.box:nth-child(even) {
background-color:#34a6db;
}
A unidade fr é uma unidade fracionária que corresponde a uma parte do espaço disponível.
No nosso exemplo temos 4 colunas em grid-template-columns com valor de unidade de 1fr. Isso quer dizer que o espaço disponível (largura total) de Grid Container foi dividida em 4 partes iguais. E esta unidade também é flexível, se reduzimos a largura do navegador as colunas vão se ajustar para ocupar os novos espaços.
Vemos em grid-template-rows que a terceira linha recebe o valor de 2fr. Isso quer dizer esta linha recebe o dobro de largura em relação as outras linhas.
Uma coisa que vimos neste exemplo é que usamos valores iguais para grid-template-columns e grid-template-rows e com isso repetimos valores em uma mesma declaração, mas existe uma forma mais econômica e rápida de declarar este valores. É o que vamos ver no próximo exemplo.
Exemplo 4 – Unidade repeat
Código HTML:
<div class="container"> <div class="item-1 box">Grid Item 1</div> <div class="item-2 box">Grid Item 2</div> <div class="item-3 box">Grid Item 3</div> <div class="item-4 box">Grid Item 4</div> <div class="item-5 box">Grid Item 5</div> <div class="item-6 box">Grid Item 6</div> <div class="item-7 box">Grid Item 7</div> <div class="item-8 box">Grid Item 8</div> <div class="item-9 box">Grid Item 9</div> <div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 269px);
grid-template-rows: repeat(2, 1fr) 2fr;
}
.box {
background-color:#f06923;
color: #fff;
padding: 1em;
text-align: center;
}
.box:nth-child(even) {
background-color:#34a6db;
}
A unidade repeat é muito útil para que você não fique repetindo a digitação de valores iguais tanto para colunas quanto para linhas.
No exemplo teríamos a repetição de 3 vezes o valor de 269 pixels (grid-template-columns: 269px 269px 269px;) sem a aplicação da unidade repeat. Com ela basta declará-la seguido do número de colunas que deverão ter o mesmo valor, separado por uma vírgula e seguido pela dimensão da coluna, tudo dentro de parênteses (grid-template-columns: repeat(3, 269px);).
Caso, além dos valores iguais de coluna e linhas, for necessário declarar colunas ou linhas a mais só que com valores diferentes, basta acrescentar o valor na posição na qual deseja.
Em grid-templates-rows foi estipulado que teriam duas linhas iguais com valor de 1fr e deveria existir também uma terceira linha com o valor de 2fr. Ela poderia ser posicionada antes ou depois das linhas iguais, no caso foi estipulado para antes (grid-template-rows: 2fr repeat(2, 1fr);).
Poderíamos também utilizar mais que um valor de repeat, caso necessário, em conjunto também com outros tipos de valores e unidades.
Exemplo 5 – Unidade minmax
Código HTML:
<div class="container"> <div class="item-1 box">Grid Item 1</div> <div class="item-2 box">Grid Item 2</div> <div class="item-3 box">Grid Item 3</div> <div class="item-4 box">Grid Item 4</div> <div class="item-5 box">Grid Item 5</div> <div class="item-6 box">Grid Item 6</div> <div>
Código CSS:
.container {
display: grid;
grid-template-columns: minmax(150px, 350px) repeat(2, 200px);
grid-template-rows: 50px 50px;
}
.box {
background-color:#f06923;
color: #fff;
padding: 1em;
text-align: center;
}
.box:nth-child(even) {
background-color:#34a6db;
}
A unidade minmax determina os tamanhos mínimo e máximo que uma coluna ou linha deve possuir. No exemplo declaramos da seguinte forma; minmax(150px, 350px), sendo que 150 pixels é largura mínima e 350 pixels a máxima.
Isso uso é percebido quando utilizamos telas de tamanhos diferentes. Ao redimensionar diminuindo a tela do navegador a coluna será ajustada, de forma flexível, até atingir o valor mínimo de 150 pixels tornando-a “rígida”. Ao aumentarmos ela volta a se tornar flexível até atingir o valor máximo de 350 pixels.
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.
Já é observado o crescimento da aplicação deste módulo. Sugiro que você 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.
O objetivo deste artigo foi dar uma pincelada sobre aspectos introdutórios deste sistema. No próximo artigo da série avançaremos um pouco mais vendo formas de posicionamentos de itens em um grid que vai ser importante para saber como desenvolver seus primeiros layouts com CSS Grid Layout.
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!
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
Ed Francisco
Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.
Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.
Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).
Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.