The CSS Podcast - 011: Grid
Um layout muito comum no design da Web é o cabeçalho, a barra lateral, o corpo e o rodapé.
Ao longo dos anos, foram usados muitos métodos para resolver esse layout, mas com a grade CSS, ele é relativamente simples e você tem muitas opções. A grade é excepcionalmente útil para combinar o controle que o dimensionamento extrínseco oferece com a flexibilidade do dimensionamento intrínseco, o que a torna ideal para esse tipo de layout. Isso ocorre porque a grade é um método de layout projetado para conteúdo bidimensional. Ou seja, organizar as coisas em linhas e colunas ao mesmo tempo.
Ao criar um layout de grade, você define uma grade com linhas e colunas. Em seguida, você coloca os itens nessa grade ou permite que o navegador os coloque automaticamente nas células criadas. Há muito o que colocar em grade, mas com uma visão geral do que está disponível, você vai criar layouts de grade em pouco tempo.
Visão geral
O que você pode fazer com a grade? Os layouts de grade têm os seguintes recursos: Você vai aprender sobre todos eles neste guia.
- Uma grade pode ser definida com linhas e colunas. Você pode escolher como dimensionar essas faixas de linha e coluna ou elas podem reagir ao tamanho do conteúdo.
- Os elementos filhos diretos do contêiner de grade são colocados automaticamente nessa grade.
- Ou você pode colocar os itens no local exato que quiser.
- Linhas e áreas na grade podem ser nomeadas para facilitar a colocação.
- O espaço extra no contêiner de grade pode ser distribuído entre as faixas.
- Os itens da grade podem ser alinhados dentro da área.
Terminologia de grade
O grid vem com uma série de novas terminologias, já que é a primeira vez que o CSS tem um sistema de layout real.
Linhas de grade
Uma grade é composta por linhas, que são horizontais e verticais. Se a grade tiver quatro colunas, ela terá cinco linhas de coluna, incluindo a que fica após a última coluna.
As linhas são numeradas a partir de 1, com a numeração seguindo o modo de gravação e a direção do script do componente. Isso significa que a linha 1 da coluna vai estar à esquerda em um idioma da esquerda para a direita, como o inglês, e à direita em um idioma da direita para a esquerda, como o árabe.
Trilhas de grade
Uma faixa é o espaço entre duas linhas de grade. Uma faixa de linha fica entre duas linhas de linha, e uma faixa de coluna fica entre duas linhas de coluna. Ao criar a grade, criamos essas faixas atribuindo um tamanho a elas.
Célula de grade
Uma célula da grade é o menor espaço em uma grade definido pela interseção das faixas de linha e coluna. É como uma célula de tabela ou uma célula em uma planilha. Se você definir uma grade e não colocar nenhum dos itens, eles serão dispostos automaticamente um item em cada célula de grade definida.
Área da grade
Várias células da grade juntas. As áreas de grade são criadas fazendo com que um item se estenda por várias faixas.
Lacunas
Um canal ou via entre as faixas. Para fins de dimensionamento, elas funcionam como uma faixa normal. Não é possível colocar conteúdo em uma lacuna, mas é possível estender os itens da grade.
Contêiner de grade
O elemento HTML que tem display: grid
aplicado
e, portanto, cria um novo contexto de formatação de grade para as crianças diretas.
.container {
display: grid;
}
Item da grade
Um item de grade é um item que é filho direto do contêiner de grade.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Linhas e colunas
Para criar uma grade básica, defina uma grade com três faixas de coluna, duas faixas de linha e uma lacuna de 10 pixels entre as faixas, conforme mostrado abaixo.
.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}
Esta grade demonstra muitas das coisas descritas na seção de terminologia. Ele tem três faixas de colunas. Cada faixa usa uma unidade de comprimento diferente. Ele tem duas faixas de linha, uma usando uma unidade de comprimento e a outra automática. Quando usado como um tamanho de faixa, o tamanho automático pode ser considerado tão grande quanto o conteúdo. As faixas são dimensionadas automaticamente por padrão.
Se o elemento com uma classe de .container
tiver itens filhos,
eles serão dispostos imediatamente nessa grade. Confira isso em ação na demonstração abaixo.
A sobreposição de grade nas Ferramentas do desenvolvedor do Chrome pode ajudar você a entender as várias partes da grade.
Abra a demonstração no Chrome.
Inspecione o elemento com o plano de fundo cinza, que tem um ID de container
.
Destaque a grade selecionando o selo dela no DOM, ao lado do elemento .container
.
Na guia "Layout",
selecione Mostrar números de linha no menu suspenso para ver os números de linha na grade.
Palavras-chave de dimensionamento intrínseco
Além das dimensões de comprimento e porcentagem, conforme descrito na seção sobre unidades de dimensionamento, as faixas de grade podem usar palavras-chave de dimensionamento intrínseco. Essas palavras-chave são definidas na especificação de dimensionamento de caixa e adicionam outros métodos de dimensionamento de caixas no CSS, não apenas faixas de grade.
min-content
max-content
fit-content()
A palavra-chave min-content
faz com que uma faixa seja o menor possível sem que o conteúdo transborde.
Mudar o layout de grade de exemplo para ter três faixas de coluna no tamanho min-content
significa que elas ficam tão estreitas quanto a palavra mais longa na faixa.
A palavra-chave max-content
tem o efeito oposto.
A faixa vai ficar larga o suficiente para que todo o conteúdo seja exibido em uma longa string contínua.
Isso pode causar transbordamentos, já que a string não será agrupada.
A função fit-content()
funciona como max-content
no início.
No entanto, quando a faixa atinge o tamanho que você transmite para a função,
o conteúdo começa a ser agrupado.
Portanto, fit-content(10em)
vai criar uma faixa menor que 10em,
se o tamanho de max-content
for menor que 10em,
mas nunca maior que 10em.
Na próxima demonstração, teste as diferentes palavras-chave de dimensionamento intrínseco mudando o tamanho das faixas da grade.
Unidade fr
Temos dimensões de comprimento, porcentagens e também essas novas palavras-chave.
Há também um método de dimensionamento especial que só funciona no layout de grade.
Essa é a unidade fr
,
uma extensão flexível que descreve uma parte do espaço disponível no contêiner de grade.
A unidade fr
funciona de maneira semelhante ao uso de flex: auto
no flexbox.
Ele distribui o espaço depois que os itens são dispostos.
Portanto, para ter três colunas que recebem a mesma parte do espaço disponível:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Como a unidade fr compartilha o espaço disponível,
ela pode ser combinada com uma lacuna de tamanho fixo ou faixas de tamanho fixo.
Para ter um componente com um elemento de tamanho fixo e a segunda faixa ocupando o espaço restante,
use uma lista de faixas de grid-template-columns: 200px 1fr
.
O uso de valores diferentes para a unidade fr vai dividir o espaço proporcionalmente. Valores maiores ocupam mais espaço livre. Na demonstração abaixo, mude o valor da terceira faixa.
A função minmax()
Essa função significa que você pode definir um tamanho mínimo e máximo para uma faixa.
Isso pode ser muito útil.
Se tomarmos o exemplo da unidade fr
acima, que distribui o espaço restante,
ela pode ser gravada usando
minmax()
como minmax(auto, 1fr)
.
A grade analisa o tamanho intrínseco do conteúdo
e distribui o espaço disponível depois de dar espaço suficiente ao conteúdo.
Isso significa que você pode não receber faixas que tenham uma parte igual
de todo o espaço disponível no contêiner de grade.
Para forçar uma faixa a ocupar uma parte igual do espaço no contêiner de grade, menos os espaços, use minmax.
Substitua 1fr
como um tamanho de faixa por minmax(0, 1fr)
.
Isso faz com que o tamanho mínimo da faixa seja 0, e não o tamanho mínimo do conteúdo.
A grade vai usar todo o tamanho disponível no contêiner,
subtrair o tamanho necessário para qualquer lacuna
e compartilhar o restante de acordo com suas unidades fr.
notação repeat()
Se você quiser criar uma grade de faixas de 12 colunas com colunas iguais, use o CSS abaixo.
.container {
display: grid;
grid-template-columns:
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr);
}
Ou você pode escrever usando
repeat()
:
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
}
A função repeat()
pode ser usada para repetir qualquer seção da lista de faixas.
Por exemplo, você pode repetir um padrão de faixas.
Você também pode ter algumas faixas normais e uma seção recorrente.
.container {
display: grid;
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}
auto-fill
e auto-fit
Você pode combinar tudo o que aprendeu sobre o dimensionamento de faixas,
minmax()
, e repetir,
para criar um padrão útil com o layout de grade.
Talvez você não queira especificar o número de faixas de coluna,
mas sim criar quantas couberem no contêiner.
Para isso, use repeat()
e as palavras-chave auto-fill
ou auto-fit
.
Na demonstração abaixo, a grade vai criar quantas faixas de 200 pixels couberem no contêiner.
Abra a demonstração em uma nova janela e observe como a grade muda conforme você muda o tamanho da janela de visualização.
Na demonstração, temos o máximo de faixas possível.
No entanto, as faixas não são flexíveis.
Você vai notar uma lacuna no final até que haja espaço suficiente para outra faixa de 200 pixels.
Se você adicionar a função minmax()
,
poderá solicitar quantas faixas couberem com um tamanho mínimo de 200 pixels e um máximo de 1fr.
A grade, então, organiza as 200 faixas de pixel, e o espaço restante é distribuído igualmente entre elas.
Isso cria um layout responsivo bidimensional sem a necessidade de consultas de mídia.
Há uma pequena diferença entre auto-fill
e auto-fit
.
Na próxima demonstração, use um layout de grade com a sintaxe explicada acima,
mas com apenas dois itens de grade no contêiner.
Ao usar a palavra-chave auto-fill
, você pode conferir que faixas vazias foram criadas.
Mude a palavra-chave para auto-fit
e as faixas serão reduzidas para o tamanho 0.
Isso significa que as faixas flexíveis agora crescem para consumir o espaço.
As palavras-chave auto-fill
e auto-fit
funcionam da mesma maneira.
Não há diferença entre eles quando a primeira faixa é preenchida.
Posicionamento automático
Você já viu a grade de autoposição em ação nas demonstrações até agora. Os itens são colocados na grade um por célula na ordem em que aparecem na origem. Para muitos layouts, isso pode ser tudo o que você precisa. Se você precisar de mais controle, há algumas coisas que pode fazer. A primeira é ajustar o layout de posicionamento automático.
Como colocar itens em colunas
O comportamento padrão do layout de grade é posicionar os itens ao longo das linhas.
Em vez disso, você pode fazer com que os itens sejam colocados em colunas usando grid-auto-flow: column
.
É necessário definir faixas de linha. Caso contrário, os itens vão criar faixas de coluna intrínsecas
e fazer o layout em uma linha longa.
Esses valores estão relacionados ao modo de gravação do documento.
Uma linha sempre é executada na direção em que uma sentença é executada no modo de gravação do documento ou componente.
Na próxima demonstração, você pode mudar o modo do valor de grid-auto-flow
e da propriedade writing-mode
.
Faixas que se estendem
É possível fazer com que alguns ou todos os itens de um layout posicionado automaticamente ocupem mais de uma faixa.
Use a palavra-chave span
e o número de linhas a serem unidas como um valor para grid-column-end
ou grid-row-end
.
.item {
grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}
Como você não especificou um grid-column-start
,
ele usa o valor inicial de auto
e é colocado de acordo com as regras de posicionamento automático.
Também é possível especificar a mesma coisa usando a abreviação grid-column
:
.item {
grid-column: auto / span 2;
}
Preenchimento de lacunas
Um layout colocado automaticamente com alguns itens que abrangem várias faixas
pode resultar em uma grade com algumas células vazias.
O comportamento padrão do layout de grade com um layout totalmente autoajustado
é sempre avançar.
Os itens serão colocados de acordo com a ordem em que estão na origem
ou qualquer modificação com a propriedade order
.
Se não houver espaço suficiente para um item,
a grade vai deixar uma lacuna e passar para a próxima faixa.
A próxima demonstração mostra esse comportamento.
A caixa de seleção vai aplicar o modo de empacotamento denso.
Isso é ativado atribuindo o valor dense
a grid-auto-flow
.
Com esse valor em vigor,
a grade vai usar os itens mais tarde no layout e usá-los para preencher lacunas.
Isso pode significar que a tela fica desconectada da ordem lógica.
Colocar itens
Você já tem muitas funcionalidades do CSS Grid. Agora vamos conferir como posicionar os itens na grade que criamos.
A primeira coisa a lembrar é que o layout de grade CSS é baseado em uma grade de linhas numeradas. A maneira mais simples de colocar as coisas na grade é de uma linha para outra. Você vai descobrir outras maneiras de colocar itens neste guia, mas sempre terá acesso a essas linhas numeradas.
As propriedades que podem ser usadas para colocar itens por número de linha são:
Eles têm abreviações que permitem definir linhas de início e término de uma só vez:
Para posicionar o item, defina as linhas de início e fim da área da grade em que ele será colocado.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px 100px);
}
.item {
grid-column-start: 1; /* start at column line 1 */
grid-column-end: 4; /* end at column line 4 */
grid-row-start: 2; /*start at row line 2 */
grid-row-end: 4; /* end at row line 4 */
}
O Chrome DevTools pode fornecer um guia visual das linhas para verificar onde o item está colocado.
O número da linha segue o modo de gravação e a direção do componente. Na próxima demonstração, mude o modo de gravação ou a direção para ver como a posição dos itens permanece consistente com a forma como o texto flui.
Empilhar itens
Com o posicionamento baseado em linha, é possível colocar itens na mesma célula da grade.
Isso significa que você pode empilhar itens
ou fazer com que um item se sobreponha parcialmente a outro.
Os itens que aparecem mais tarde na fonte são mostrados acima dos itens anteriores.
É possível mudar essa ordem de empilhamento usando z-index
, assim como com itens posicionados.
Números de linha negativos
Ao criar uma grade usando grid-template-rows
e grid-template-columns
,
você cria o que é conhecido como grade explícita.
É uma grade que você definiu e deu tamanho às faixas.
Às vezes, os itens aparecem fora dessa grade explícita.
Por exemplo,
você pode definir faixas de coluna e adicionar várias linhas de itens de grade sem definir faixas de linha.
As faixas são dimensionadas automaticamente por padrão.
Também é possível colocar um item usando grid-column-end
fora da grade explícita definida.
Em ambos os casos, a grade vai criar faixas para que o layout funcione,
e essas faixas são chamadas de grade implícita.
Na maioria das vezes, não faz diferença se você está trabalhando com uma grade implícita ou explícita. No entanto, com a veiculação baseada em linhas, você pode encontrar a principal diferença entre os dois.
Usando números de linha negativos, é possível posicionar itens na linha final da grade explícita.
Isso pode ser útil se você quiser que um item se estenda da primeira à última linha da coluna.
Nesse caso, use grid-column: 1 / -1
.
O item vai se esticar pela grade explícita.
No entanto, isso só funciona para a grade explícita. Considere um layout de três linhas de itens posicionados automaticamente em que você quer que o primeiro item se estenda até a linha final da grade.
Você pode pensar que pode dar esse item grid-row: 1 / -1
.
Na demonstração abaixo, você pode conferir que isso não funciona.
As faixas são criadas na grade implícita,
não há como chegar ao fim da grade usando -1
.
Dimensionar faixas implícitas
As faixas criadas na grade implícita vão ter o tamanho automático por padrão.
No entanto, se você quiser controlar o dimensionamento das linhas,
use a propriedade
grid-auto-rows
e, para colunas,
grid-auto-columns
.
Para criar todas as linhas implícitas com um tamanho mínimo de 10em
e um tamanho máximo de auto
:
.container {
display: grid;
grid-auto-rows: minmax(10em, auto);
}
Para criar colunas implícitas com um padrão de faixas de 100 px e 200 px de largura. Nesse caso, a primeira coluna implícita será de 100 px, a segunda de 200 px, a terceira de 100 px e assim por diante.
.container {
display: grid;
grid-auto-columns: 100px 200px;
}
Linhas de grade nomeadas
Pode ser mais fácil colocar itens em um layout se as linhas tiverem um nome em vez de um número. Para nomear qualquer linha na grade, adicione um nome entre colchetes. Vários nomes podem ser adicionados, separados por um espaço dentro dos mesmos colchetes. Depois que você nomear as linhas, elas poderão ser usadas em vez dos números.
.container {
display: grid;
grid-template-columns:
[main-start aside-start] 1fr
[aside-end content-start] 2fr
[content-end main-end]; /* a two column layout */
}
.sidebar {
grid-column: aside-start / aside-end;
/* placed between line 1 and 2*/
}
footer {
grid-column: main-start / main-end;
/* right across the layout from line 1 to line 3*/
}
Áreas do modelo de grade
Você também pode nomear áreas da grade e colocar itens nelas. Essa é uma técnica incrível, porque permite que você veja como seu componente fica no CSS.
Para começar, dê um nome aos filhos diretos do contêiner de grade usando a
propriedade grid-area
:
header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
footer {
grid-area: footer;
}
O nome pode ser qualquer coisa, exceto as palavras-chave auto
e span
.
Depois que todos os itens forem nomeados,
use a propriedade
grid-template-areas
para definir as células da grade que cada item vai ocupar.
Cada linha é definida entre aspas.
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
Há algumas regras ao usar grid-template-areas
.
- O valor precisa ser uma grade completa sem células vazias.
- Para estender as faixas, repita o nome.
- As áreas criadas pela repetição do nome precisam ser retangulares e não podem ser desconectadas.
Se você violar qualquer uma das regras acima, o valor será tratado como inválido e descartado.
Para deixar espaços em branco na grade, use um .
ou múltiplos sem espaços em branco entre eles.
Por exemplo, para deixar a primeira célula da grade vazia, posso adicionar uma série de caracteres .
:
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"....... header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
Como todo o layout é definido em um só lugar,
é fácil redefinir o layout usando consultas de mídia.
No próximo exemplo, criei um layout de duas colunas que muda para três colunas
redefinindo o valor de grid-template-columns
e grid-template-areas
.
Abra o exemplo em uma nova janela para brincar com o tamanho da janela de visualização e conferir a mudança no layout.
Também é possível conferir como a propriedade grid-template-areas
se relaciona com writing-mode
e direção,
assim como com outros métodos de grade.
Propriedades de abreviação
Há duas propriedades abreviadas que permitem definir muitas das propriedades da grade de uma só vez. Elas podem parecer um pouco confusas até que você entenda exatamente como elas funcionam. Você pode usar ou não as formas longas.
grid-template
A propriedade grid-template
é uma forma abreviada de grid-template-rows
, grid-template-columns
e grid-template-areas
.
As linhas são definidas primeiro,
junto com o valor de grid-template-areas
.
O dimensionamento da coluna é adicionado após um /
.
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}
Propriedade grid
A abreviação grid
pode ser usada exatamente da mesma forma que a abreviação grid-template
.
Quando usado dessa forma, ele redefine as outras propriedades da grade que aceita para os valores iniciais.
O conjunto completo é:
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
Você também pode usar essa abreviação para definir como a grade implícita se comporta, por exemplo:
.container {
display: grid;
grid: repeat(2, 80px) / auto-flow 120px;
}
Alinhamento
O layout de grade usa as mesmas propriedades de alinhamento que você aprendeu no guia sobre
flexbox.
Na grade, as propriedades que começam com justify-
são sempre usadas na direção inline,
a direção em que as frases são executadas no modo de escrita.
As propriedades que começam com align-
são usadas no eixo do bloco,
a direção em que os blocos são dispostos no modo de escrita.
justify-content
ealign-content
: distribuem espaço adicional no contêiner de grade ao redor ou entre as faixas.justify-self
ealign-self
: são aplicados a um item de grade para movê-lo dentro da área de grade em que ele está colocado.justify-items
ealign-items
: são aplicados ao contêiner de grade para definir todas as propriedadesjustify-self
nos itens.
Como distribuir espaço extra
Nesta demonstração, a grade é maior do que o espaço necessário para posicionar as faixas de largura fixa.
Isso significa que temos espaço nas dimensões inline e de bloco da grade.
Teste valores diferentes de align-content
e justify-content
para conferir o comportamento das faixas.
Observe como as lacunas ficam maiores ao usar valores como space-between
,
e qualquer item da grade que abranja duas faixas também cresce para absorver o espaço adicional adicionado à lacuna.
Mover conteúdo
Os itens com uma cor de plano de fundo parecem preencher completamente a área da grade em que estão colocados,
porque o valor inicial de justify-self
e align-self
é stretch
.
Na demonstração, mude os valores de justify-items
e align-items
para conferir como isso muda o layout.
A área da grade não está mudando de tamanho.
Em vez disso, os itens estão sendo movidos dentro da área definida.
Teste seu conhecimento
Teste seus conhecimentos sobre grade
Quais das opções a seguir são termos de grade CSS?
main { display: grid; }
Qual é a direção de layout padrão de uma grade?
Qual é a diferença entre auto-fit
e auto-fill
?
auto-fit
vai esticar um contêiner para caber nos filhos, enquanto auto-fill
faz com que os filhos se encaixem no contêiner.auto-fit
vai esticar as células para caber no contêiner, enquanto auto-fill
não vai.O que é o min-content
?
O que é o max-content
?
O que é a posição automática?
grid-area
e são colocados nessa célula.Recursos
Este guia apresentou uma visão geral das diferentes partes da especificação do layout de grade. Para saber mais, confira os recursos a seguir.