Segredos do layout de grade CSS revelados

Contente

• 01. A função minmax ()
• 02. Preenchimento automático e ajuste automático
• 03. Modo de embalagem densa
• 04. Linhas mágicas e áreas mágicas
• 05. Alinhamento padrão
• 06. Fallbacks
• 07. Dimensionamento com conteúdo mínimo e conteúdo máximo
• Recursos de nível 2
• 08. As lacunas estão mudando
• 09. Grade não é Maçonaria
• 10. Pseudo-elementos da área de grade

O CSS Grid Layout foi lançado em navegadores em março de 2017 e, no momento em que este artigo foi escrito, bem mais de 70 por cento dos visitantes da maioria dos sites terão suporte para Grid. Esse número está crescendo rapidamente e deve melhorar à medida que o Edge enviar seu suporte atualizado.

Espero que você já tenha tido a chance de explorar alguns dos recursos do CSS Grid Layout. Este artigo examinará alguns dos recursos que você pode ter perdido. Também darei uma olhada em algumas coisas que podem vir em níveis futuros da especificação.

01. A função minmax ()

Ao contrário de outros métodos de layout, onde precisamos definir o tamanho do próprio item, no Layout de grade definimos o tamanho no nível do contêiner. Definimos trilhas, que criam células de grade, nas quais o conteúdo pode ser colocado.

Para fazer isso de forma flexível, permitindo conteúdo que pode ser menor ou maior do que o projeto esperado, o Grid traz novos recursos para CSS. Um deles é o mínimo máximo() função. Esta função significa que você pode especificar um tamanho mínimo e máximo para uma faixa.

No exemplo abaixo, tenho um painel bacana com um título no canto superior esquerdo e uma imagem grande à direita. Quero que a linha superior tenha no mínimo 150 pixels de altura, não importa quantas linhas o título ou qualquer outro conteúdo possa precisar.

No entanto, se houver mais linhas de conteúdo ou o tamanho do texto for maior, quero que essa caixa aumente para mais de 150 pixels. É aqui que eu uso mínimo máximo(), definindo um tamanho mínimo de 150 pixels e máximo de automático.

.grid {display: grid; colunas de modelo de grade: 1,2fr 1fr; grid-template-rows: minmax (150px, automático) minmax (300px, automático); }

Usando mínimo máximo(), se tivermos apenas o título nessa caixa, a caixa é mais alta do que o espaço necessário. Se tivermos um título mais longo e um texto adicional, ele se expandirá para abrir espaço.

02. Preenchimento automático e ajuste automático

O Flexbox permite muitos padrões de design responsivos sem a necessidade de recorrer a Media Queries. O Grid vai um passo além, permitindo padrões de design flexíveis com itens alinhados em duas dimensões: por linha e por coluna. Um padrão útil é ser capaz de ter quantas colunas couber em um contêiner e, para fazer isso, usamos duas novas palavras-chave: preenchimento automático e ajuste automático.

Para ter tantas trilhas de coluna de 200 pixels quanto caber em um contêiner, use uma lista de trilhas de:

.grid1 {display: grid; colunas de modelo de grade: repetir (preenchimento automático, 200px); }

Para tornar essas colunas flexíveis, mas mantendo um mínimo de 200 pixels, coloque o mínimo máximo() função que descrevi na dica anterior. Podemos criar colunas de pelo menos 200 pixels com no máximo 1fr. Depois de calcular quantas colunas de 200 pixels caberão, o navegador atribui o espaço restante igualmente entre as colunas.

.grid1 {display: grid; colunas de modelo de grade: repetir (preenchimento automático, minmax (200px, automático)); }

Eu tenho usado o preenchimento automático palavra-chave aqui; isso manterá espaço para as faixas, mesmo que não haja conteúdo para elas. Se ao invés você usar ajuste automático, todas as trilhas completamente vazias serão recolhidas e seu espaço atribuído às outras trilhas.

03. Modo de embalagem densa

Quando você declara display: grade em um elemento, todos os filhos diretos se tornam itens de grade e os itens começarão a se organizar automaticamente nessa grade. Isso acontece com base nas regras de colocação automática definidas na especificação.

Se alguns de seus itens abrangem trilhas, e isso significa que há itens que não cabem em uma trilha disponível, eles criarão uma nova linha na grade. Por padrão, o Grid avança e exibe seus itens na ordem em que aparecem na fonte.

No entanto, se você definir o valor de grid-auto-flow para denso, O Grid começará a retroceder após deixar essas lacunas. Se encontrar um item que caiba em uma lacuna já deixada, ele o pegará e o colocará fora da ordem de origem, na lacuna.

.grid {display: grid; fluxo automático de grade: denso; colunas do modelo de grade: repetir (preenchimento automático, minmax (200px, 1fr)); }

Esse comportamento é útil se os itens que você está exibindo não têm uma ordem lógica, no entanto, você pode facilmente tornar um layout muito difícil para alguém que navega usando o teclado se eles estiverem alternando de item em item. Use este recurso com muito cuidado e teste!

04. Linhas mágicas e áreas mágicas

Ao usar o método Áreas de modelo de grade de layout de conteúdo, você cria uma área nomeada em sua grade. Isso, por sua vez, cria um conjunto de linhas nomeadas para linhas e colunas que usam o nome da área com -começar e -fim anexado. Neste próximo exemplo, usei as linhas nomeadas criadas posicionando minhas áreas de grade para posicionar uma sobreposição.

.grid {display: grid; colunas-modelo de grade: 1fr 2fr 1fr; grid-auto-rows: minmax (100px, auto); grid-template-areas: "sd1 content sd2" "sd1 footer sd2"; } .side1 {área da grade: sd1; } .side2 {área da grade: sd2; } .content {grid-area: content; } .footer {área da grade: rodapé; } .grid .overlay {grade-coluna: sd1-start / sd2-end; grid-row: content-start / footer-end; }

Isso funciona ao contrário quando você usa linhas de grade nomeadas. Se você nomear linhas que terminam com -começar e -fim para colunas e linhas, você criará uma área nomeada do nome principal usado.

Uma área definida pelas linhas content-start e fim do conteúdo para linhas e colunas, teria o conteúdo do nome. Você pode colocar um item nessa área com área da grade: conteúdo.

05. Alinhamento padrão

Quando um item se torna um item de grade, o comportamento padrão é esticar sua área de grade; isto é, a menos que o item seja algo com uma proporção de aspecto intrínseca. Se o item tiver uma proporção de aspecto, ele se alinhará com a linha inicial na direção da linha e da coluna. Isso significa que o Grid não esticará suas imagens fora de proporção por padrão, embora você possa fazer isso, é claro, se quiser, alterando o comportamento de alinhamento.

06. Fallbacks

Escritos na especificação CSS Grid estão os detalhes de como o CSS Grid Layout substitui outros métodos de layout. Se você tiver um item que está flutuando, use display: table ou display: bloco embutido e então se torna um item de grade, a especificação explica o que acontecerá.

Resumindo, quando um item se torna um item de grade, você encontrará:

• Se for flutuado ou usar a propriedade clear, essas propriedades deixarão de afetar o item.
• Se tiver display: bloco embutido ou usa uma propriedade de tabela como display: table-cell estes não se aplicam mais.
• No caso de propriedades de tabela, caixas anônimas que são geradas ao usar display: table-cell sem uma tabela pai não são mais criados.
• alinhamento vertical não se aplica mais.

Eu criei um cheatsheet que detalha essas substituições com exemplos. Você pode encontrar isso no meu site.

Embora confiar nesse comportamento de substituição funcione em muitos casos, você precisa tomar cuidado com as larguras definidas nos itens que mais tarde se tornam itens de grade. Nos métodos de layout anteriores, controlamos a largura de um item no item.

Com Grid, colocamos o item em uma célula de grade que o restringe. Isso significa que se você tiver um item com uma largura percentual definida, essa largura será convertida em uma porcentagem da área da grade assim que o item se tornar um item da grade.

A solução para isso é outra especificação CSS: Consultas de recursos. Podemos usar uma consulta de recurso para testar o suporte de layout de grade. Se o navegador suportar Grid, defino a largura como automática.

.grid> div {float: left; largura: 33,333%; } @supports (display: grid) {.grid> div {width: auto; }}

07. Dimensionamento com conteúdo mínimo e conteúdo máximo

A especificação CSS Intrinsic & Extrinsic Sizing Module Nível 3 define palavras-chave adicionais para dimensionamento. Essas palavras-chave incluem min-content e max-content, que pode ser usado para definir o dimensionamento em suas trilhas de grade.

Como um exemplo muito simples, criei uma grade de trilhas de duas colunas. Uma coluna é definida como min-content tamanho, a segunda coluna max-content. A primeira faixa tem o tamanho necessário para exibir uma única palavra do conteúdo - esse é o tamanho mínimo que essa faixa pode ter. O segundo se expande para permitir que toda a linha seja exibida, o que você pode encontrar estouros de causa que você precisa gerenciar e lidar.

.grid {display: grid; colunas de modelo de grade: min-content max-content; }

Recursos de nível 2

A especificação da grade está agora no status de recomendação candidata, o que significa que esperamos não fazer grandes alterações na especificação; em vez disso, ele passa para uma fase em que procuramos pelo menos duas implementações de cada recurso. Isso garante que a especificação faça sentido e possa ser implementada por navegadores.

No entanto, as coisas ainda estão acontecendo para o Grid e, no restante deste artigo, veremos uma mudança recente na especificação do Nível 1 e algumas coisas que talvez tenhamos que esperar no Nível 2.

08. As lacunas estão mudando

O grid-gap taquigrafia, mais a longa grade-coluna-lacuna e grade-linha-lacuna propriedades foram alteradas durante a reunião do Grupo de Trabalho CSS de agosto de 2017 para se tornar Gap = Vão, lacuna de coluna e lacuna de linha. Eles também foram movidos para terem suas definições na especificação de Box Alignment.

Esta é a especificação que pegou os bons recursos de alinhamento do Flexbox e expandiu para que eles também pudessem ser usados ​​no Grid - e potencialmente em outros métodos de layout também.

Colocar os recursos de lacuna na especificação de Box Alignment e nomeá-los de uma forma mais genérica significa que eles podem ser usados ​​em outros tipos de layout onde fizerem sentido. O lugar óbvio onde eles fazem sentido é no Flexbox.

Essa renomeação significa que, em última análise, obteremos as lacunas adequadas no Flexbox; não mexa mais com as margens. Os navegadores farão o alias dos nomes antigos com os novos, então, se você já usou lacunas no Layout de grade, o código não será quebrado. No entanto, talvez você queira também adicionar as duas propriedades; navegadores ignoram aquele que não suportam.

09. Grade não é Maçonaria

Quando as pessoas vêem pela primeira vez o modo de empacotamento denso que demonstrei no início deste artigo, muitas vezes pensam que a Grade pode fazer o padrão de layout da Maçonaria. A maçonaria, no entanto, é um tipo de layout completamente diferente. Um layout de alvenaria padrão não é uma grade estrita, fazendo com que este padrão fique em algum lugar entre o que o Flexbox é bom e o que o Grid faz.

No Grupo de Trabalho CSS, entretanto, estamos pensando sobre esse assunto. É algo que sabemos que os desenvolvedores realmente querem ser capazes de fazer. Você pode encontrar a discussão no repositório de rascunhos do CSS WG no GitHub e até mesmo adicionar suas ideias.

10. Pseudo-elementos da área de grade

Outra solicitação de recurso comum para o Layout de grade é a capacidade de estilizar as células ou áreas da grade, sem a necessidade de inserir um elemento para estilizar. Atualmente, para adicionar bordas a uma área, você precisa adicionar um elemento vazio à sua marcação ou usar o conteúdo gerado para criar um item de grade que pode ser estilizado.

Há uma questão levantada em relação a considerar a adição de algum tipo de pseudo-elemento para áreas de grade. Conseqüentemente, isso lhe daria algo para definir se você quisesse adicionar planos de fundo ou bordas a uma área específica sem adicionar alguma marcação extra ou usar conteúdo gerado.

Este artigo apareceu originalmente na edição 298 de revista net, a revista para web designers e desenvolvedores profissionais - oferecendo as últimas novas tendências, tecnologias e técnicas da web. Compre a edição 298 aqui ou inscreva-se na rede aqui.

Gostou disso? Leia isso!

• Crie um layout responsivo com CSS Grid
• Obtenha o máximo de desempenho com CSS Grid
• Um guia para escrever CSS melhor