Curso de CSS / Grid básico: faixas, linhas e posicionamento

O CSS Grid define linhas e colunas para layout bidimensional e posiciona os itens filhos diretos nessa grade. Linhas da grade delimitam faixas e células; um item pode abranger múltiplas faixas sem alterar a ordem do documento.

Identifique contêineres, linhas, faixas, células e áreas

Um contêiner Grid é um elemento pai que aplica display: grid, e os itens Grid são filhos diretos desse pai. Filhos dentro do primeiro filho não são itens independentes na grade externa. Desenhar uma grade em CSS não cria novos elementos HTML; apenas muda a forma como calculamos onde cada filho ficará na grade.

Os números das linhas e os números das colunas são diferentes. Se você contar até a borda externa das duas colunas, as linhas numeradas são 1·2·3. Se você colocar um item nas linhas 1 a 3, ele ocupará duas colunas. gap é o espaço entre as faixas e é calculado separadamente do padding ou borda do item. É fácil ver os números das linhas e as áreas reais ativando a exibição da grade em Elements nas ferramentas de desenvolvimento. Os conceitos básicos de Grid do MDN resumem termos e operações básicas.

Defina colunas com px, porcentagens e fr

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

Este código parcial pode ser comparado substituindo as declarações de coluna na regra .grid do exemplo completo. A primeira coluna usa 160px, e a segunda coluna usa o espaço restante. fr é uma fração, que divide o espaço restante por uma razão após considerar outras faixas e lacunas. Congelar a primeira coluna sem levar em conta o conteúdo pode tornar o corpo muito estreito para telas estreitas, então julgue isso com base no conteúdo real.

Em um contêiner com largura de 640px, se a lacuna for de 16px e as duas colunas forem 1fr·2fr, o espaço a ser distribuído é de 624px. Se não houver restrição de tamanho mínimo, a primeira coluna terá 208px e a segunda coluna 416px. O exemplo completo usa minmax(0, 1fr) minmax(0, 2fr) para garantir que a largura mínima da faixa não seja fixada significativamente devido ao seu conteúdo.

Se você usar 50% 50% e gap: 16px juntos, a largura do contêiner pode já estar preenchida apenas com as colunas, e então o gap pode ser adicionado causando overflow. Num contêiner de 640px, 50% + 50% + 16px totaliza 656px. Para dividir o espaço restante entre colunas flexíveis, use fr. Isso não significa que você precisa tornar todas as colunas da mesma proporção. Sua lista pode precisar ter uma pequena coluna de nome e uma coluna de descrição grande, e você também pode querer usar uma combinação de colunas fixas e flexíveis.

Compare linhas explícitas e implícitas

grid-template-rows: 80px define explicitamente uma primeira linha. Se não houver linhas suficientes para colocar o item atrás, uma linha implícita é criada, e seu tamanho pode ser ajustado com grid-auto-rows. Criar duas colunas não limita você a duas linhas.

Use uma linha fixa onde exista uma exigência clara de tamanho, mas deixe que cartões explicativos acomodem linhas extras de tradução ou texto ampliado. minmax(100px, auto) define um mínimo e permite crescimento; ele não exige que todas as linhas tenham alturas idênticas. Cada linha depende do seu conteúdo e das condições de layout. Para mais detalhes, veja MDN: grid-auto-rows e dimensões das linhas implícitas .

Coloque itens com linhas e spans

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1 significa da primeira linha até a última linha da grade explícita. É adequado para títulos ou áreas destacadas que ocupam toda a largura da grade, seja em duas colunas ou em uma coluna. Números de linha negativos são contados em relação ao final da grade explícita e não representam o fim de todas as faixas geradas automaticamente. Como ajustar o número e o tamanho mínimo das colunas repetidas é comparado em CSS Grid: repeat, auto-fit, auto-fill e Areas.

span 2 significa ocupar duas faixas, e se você não especificar uma linha inicial exata, a posição será determinada automaticamente. Em dispositivos móveis, se você tiver apenas uma coluna e mantiver span 2, pode criar uma coluna extra indesejada. Se você quiser manter a largura total, use 1 / -1 ou redefina o valor do span no mobile. Quando você minimiza as especificações de posicionamento, qualquer item restante será colocado em células vazias na ordem do HTML.

Execute o exemplo completo da Grid

Salve o código abaixo como grid-basics.html e abra-o. Acima de 480px de largura da janela, A e B ficam na primeira linha fixa, C ocupa todas as colunas da linha automática seguinte e D e E ficam na próxima linha. Com 480px ou menos, a grade passa a uma coluna e C continua a ocupar toda a largura.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

1. Em telas largas, certifique-se de que a largura da .grid seja 640px e ative Mostrar Grade nas Ferramentas de Desenvolvedor. As colunas são 208px·416px, e o espaçamento entre elas é de 16px. Se você mudar a proporção das colunas para 1fr·1fr, cada uma se torna 312px. Após a comparação, ela é restaurada para 1fr·2fr.
2. A primeira linha tem altura de 80px. Se você adicionar várias linhas de texto dentro de A, a altura da linha permanecerá a mesma e o conteúdo pode transbordar. Se você retornar o texto ao estado original e mudar grid-template-rows para minmax(80px, auto), ela pode crescer dependendo do conteúdo.
3. Aumente suficientemente o conteúdo de C. grid-auto-rows é minmax(100px, auto) para que as linhas possam ser maiores que 100px. Altere apenas grid-auto-rows para 100px e observe a diferença nas linhas fixas, depois retorne ao valor original.
4. Se você apenas remover a declaração grid-column de C, C será colocado em uma célula e a posição dos itens atrás dele também mudará. Restaure 1/-1 novamente. Reduza a largura da janela para 480px ou menos para ver se a especificação de largura geral é mantida em 1 coluna.

Trate conteúdos longos em telas estreitas

A faixa de 1fr do Grid pode se estender devido a strings longas por causa de seu tamanho mínimo automático padrão. minmax(0, 1fr) é um método de definir o tamanho mínimo da faixa para 0, e quebras de linha reais na string exigem regras separadas. min-width: 0 também é aplicado ao próprio item dependendo da situação. Salve o seguinte código como grid-long-text.html. Se os itens extrapolarem a coluna, verifique Overflow, quebra de texto longo e reticências para regras de quebra de linha de strings longas.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

1. Altere apenas overflow-wrap para normal para confirmar que as letras podem extrapolar mesmo que a largura da faixa seja mantida.
2. Se você substituir ambas as colunas por 1fr 1fr, poderá ver como o tamanho mínimo de uma string longa afeta a distribuição das colunas. Após comparar, restauramos ambos minmax(0, 1fr) e anywhere.

Escolha um ponto de transição responsivo com base na largura real de leitura do conteúdo, em vez do nome do dispositivo. Os 480px neste exemplo são uma escolha de aprendizado e não um padrão para todas as Grades. Você pode estreitar a tela e ampliar o texto para ver linhas fixas, strings longas e colunas extras criadas por spans para ajudá-lo a isolar a causa do transbordamento.