CSS Grid já tem um excelente suporte e é aceito pela maioria dos navegadores modernos populares. Da mesma forma que Flexbox nos deu uma maneira de organizar os elementos de bloco próximos um do outro, CSS Grid nos permite não apenas organizar elementos em linha e coluna, mas em várias linhas e colunas. Finalmente, os layouts bidimensionais estão se tornando mais simples!
É muito comum, quando se está aprendendo CSS e HTML, copiar layouts desenvolvidos por outras pessoas e depois alterá-los, excluindo algumas coisas e brincando com eles até entender o que realmente faz as coisas acontecerem.
Pensando nisso, veja a seguir uma lista com alguns layouts comuns com CSS Grid (e alguns sem) para você ver, avaliar e fuçar bastante para ajudar no seu aprendizado de layouts com CSS Grid Layout.
Imagem grande seguida de artigos
Este é um layout bastante comum de se encontrar na Web: uma grande imagem de introdução (chamada por alguns de “hero”) seguida de imagens, botões ou artigos menores.
As disposição das imagens menores foram feitas usando CSS Grid e estão no ponto certo para você começar com os estudos. A grid nos dá controle sobre a largura ou a largura de cada uma das grid cells (“células da grade”).
Isso permite manter uma proporção sensível à sua altura:
|
1 |
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
O restante do estilo de posição neste exemplo foi feito usando Flexbox, pois esses são layouts unidimensionais. Há ainda certa confusão entre devs, alguns pensando que CSS Grid veio substituir Flexbox, mas não é o caso. CSS Grid é brilhante para criar grades, mas isso não significa que nossas outras ferramentas de layout não sejam mais necessárias.
Galeria de imagens de página inteira
Esse layout da galeria de imagens usa recursos de CSS Grid para criar diferentes tamanhos de grid cells. Foram usados os valores de grid-column e grid-row para fazer com que as células individuais se estendam por 2 ou mais espaços na track.
Observe esta linha:
|
1 |
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; |
Ela criará uma grid com 6 colunas, cada uma com uma unidade de fração de largura. Cada um deles compartilha 1/6 da largura do contêiner. Simplificadamente, isto também poderia ter sido escrito assim:
|
1 |
grid-template-columns: repeat(6, 1fr); |
O uso do valor de span com um número fará com que uma célula da grid abranja muitas linhas ou colunas. grid-column: span 2, por exemplo, criará uma célula com 2 colunas de largura. Foi usado object-fit novamente para fazer as imagens manterem a proporção, enquanto preenchem o espaço de seus contêineres.
Se as imagens da galeria tiverem mais restrições do que o exemplo com imagens de gatos, com relação ao espaço em que elas se encaixam, você poderá usar media queries para alterar o número de linhas ou colunas em diferentes larguras.
Card Layout
Demo: https://card-layout.glitch.me/
Código: https://glitch.com/edit/#!/card-layout
Esse é um layout de coluna que preenche cada coluna com cards à medida que a largura da viewport aumenta. Este é um ótimo exemplo de onde CSS Grid não é realmente necessário, mas também é um resultado possível de ser alcançado usando grids. Aqui temos um layout de coluna preenchido com cartões.
Não sabemos, necessariamente, o tamanho de cada cartão, nem precisamos alterar as alturas dos outros cartões se um cartão for particularmente alto. As colunas CSS são projetadas para fazer isso:
|
1 2 |
column-count: 2; column-gap: 20px; |
Os estilos acima criarão 2 colunas com um gap entre elas de 20px. As media queries podem ser usadas para alterar o número de colunas necessárias quando a página é larga o suficiente para contê-las.
As colunas serão preenchidas com conteúdo e depois espalharão o conteúdo em uma nova coluna quando estiver cheia. Usar break-inside: avoid impedirá que os cards sejam divididos em várias colunas.
Layout Santo Graal
O layout “Santo Graal” descreve uma página com um cabeçalho e rodapé que fica na parte superior e inferior da viewport, respectivamente, e uma seção de conteúdo dividida em 2 barras laterais, com o conteúdo principal entre elas.
Isso tem sido notoriamente difícil de resolver de maneira elegante com CSS devido à necessidade de esticar o conteúdo para empurrar o rodapé para o final da página. Com CSS Grid, a criação desse layout requer muito poucas linhas de código.
|
1 2 3 4 5 6 |
body { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; height: 100vh; } |
Para quem entende o mínimo de CSS Grid, o código já se explica a si mesmo. O “Santo Graal” dos layouts, que até o advento de Flexbox era algo dificílimo de ser feito, com CSS Grid se tornou algo banal: uma solução elegante com apenas 4 linhas de código. :-)
Conclusão
Estes 4 layouts mais comuns são encontrados aos montes pelas webs à fora (daí o nome), e agora, com CSS Grid, tornaram-se muitíssimo fáceis e divertidos de se fazer, ficando ainda com um toque elegante proporcionado por CSS Grid.
Tem algum outro layout comum da Web que você já codificou com CSS Grid e gostaria de mostrar? Deixe o link nos comentários.