Podcast do CSS - 011: Grade
Um layout muito comum no web design é um layout de cabeçalho, barra lateral, corpo e rodapé.
Ao longo dos anos, há muitos métodos para resolver esse layout, mas com a grade CSS, não só é relativamente simples, mas há muitas opções. A grade é muito útil para combinar os elementos que o dimensionamento extrínseco oferece a flexibilidade do tamanho intrínseco, o que o torna ideal para esse tipo de layout. Isso ocorre porque a grade é um método de layout projetado para conteúdo bidimensional. Ou seja, colocar 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 itens nessa grade, ou permita que o navegador as coloque automaticamente nas células que você criou. Há muito para pontilhar, mas com uma visão geral do que está disponível você fará layouts de grade em pouco tempo.
Visão geral
Então, o que você pode fazer com a grade? Os layouts de grade têm os recursos abaixo. Neste guia, você vai aprender sobre elas.
- 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 filhos diretos do contêiner da grade serão colocados automaticamente nessa grade.
- Também é possível colocar os itens no local exato que você quiser.
- As linhas e áreas na grade podem ser nomeadas para facilitar o posicionamento.
- O espaço disponível no contêiner da grade pode ser distribuído entre os trilhos.
- Os itens da grade podem ser alinhados dentro da área deles.
Terminologia de grade
A grade vem com várias terminologias novas, já que é a primeira vez que o CSS tem um sistema de layout real.
Linhas de grade
Uma grade é composta de linhas, que são executados horizontal e verticalmente. Se a grade tiver quatro colunas, ele terá cinco linhas de coluna, incluindo a que aparece após a última coluna.
As linhas são numeradas a partir de 1, com a numeração de acordo com o modo de escrita e a direção do script do componente. Isso significa que a linha 1 da coluna estará à esquerda em um idioma da esquerda para a direita, como o inglês, e à direita em um idioma escrito da direita para a esquerda, como o árabe.
Trilhas de grade
Uma faixa é o espaço entre duas linhas de grade. Um acompanhamento de linha está entre duas linhas de linha e um acompanhamento de coluna entre duas linhas de coluna. Ao criar nossa grade, criamos essas trilhas atribuindo um tamanho a elas.
Célula de grade
Uma célula de grade é o menor espaço em uma grade, definido pela interseção das trilhas de linha e coluna. É como as células de uma tabela ou de uma planilha. Se você definir uma grade e não colocar nenhum dos itens eles colocarão automaticamente um item em cada célula de grade definida.
Área da grade
Várias células de grade juntas. As áreas de grade são criadas fazendo com que um item se estenda por várias faixas.
Lacunas
Uma calha ou um beco entre os trilhos. Para fins de dimensionamento, elas funcionam como uma faixa normal. Não é possível colocar conteúdo em uma lacuna, mas você pode distribuir os itens da grade por ele.
Contêiner de grade
O elemento HTML que tem display: grid
aplicado,
e, portanto, cria um novo contexto de formatação de grade para os filhos diretos.
.container {
display: grid;
}
Item em grade
Um item de grade é um item que é um filho direto do contêiner da 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 trilhas de coluna, duas faixas de linha e uma lacuna de 10 pixels entre as faixas, como mostrado a seguir.
.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}
Essa grade demonstra muitas das coisas descritas na seção de terminologia. Ele tem três linhas de coluna. Cada faixa usa uma unidade de comprimento diferente. Ele tem duas linhas, um usando uma unidade de comprimento e o outro automático. Quando usado como um sistema de dimensionamento automático de faixas, pode ser considerado como o tamanho do conteúdo. As faixas são dimensionadas automaticamente por padrão.
Se o elemento com uma classe .container
tiver itens filhos:
eles serão dispostos imediatamente nessa grade. É possível conferir como isso funciona na demonstração abaixo.
A sobreposição de grade no Chrome DevTools 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 container
.
Selecione o selo de grade no DOM, ao lado do elemento .container
, para destacar a grade.
Na guia Layout,
Selecione Exibir números de linha no menu suspenso para conferir os números das linhas na grade.
Palavras-chave de dimensionamento intrínseco
Além das dimensões de duração e porcentagem, conforme descrito na seção sobre de 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 tamanho da caixa. e adicionar outros métodos para dimensionar caixas no CSS, não apenas as de grade.
min-content
max-content
fit-content()
O min-content
palavra-chave fará com que a faixa seja o menor possível sem que o conteúdo da faixa transborde.
Mudando o layout de grade de exemplo para ter três faixas de colunas no tamanho min-content
significa que elas ficam tão estreitas quanto a palavra mais longa da faixa.
O max-content
tem o efeito oposto.
A largura da faixa será suficiente para que todo o conteúdo seja exibido em uma única string longa e ininterrupta.
Isso pode causar estouro, já que a string não será unida.
O fit-content()
funciona como max-content
no início.
No entanto, assim que a faixa atingir o tamanho que você passa para a função,
o conteúdo começa a ser agrupado.
Portanto, fit-content(10em)
criará uma faixa menor que 10 em.
se o tamanho de max-content
for menor que 10 em,
mas nunca maior que 10 em.
Na próxima demonstração, experimente as diferentes palavras-chave de dimensionamento intrínseco mudando o dimensionamento das faixas da grade.
.A unidade fr
Já temos dimensões de comprimento, porcentagens e essas novas palavras-chave.
Há também um método de dimensionamento especial que funciona apenas no layout de grade.
Esta é a unidade fr
,
um comprimento flexível que descreve uma parcela do espaço disponível no contêiner da 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 tenham a mesma parcela de espaço disponível:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Como a unidade fr compartilha espaço disponível,
ela pode ser combinada com uma lacuna de tamanho fixo ou faixas de tamanho fixo.
Para que um componente com um elemento de tamanho fixo e a segunda faixa ocupem o espaço restante,
que você pode usar como uma lista de acompanhamento de grid-template-columns: 200px 1fr
.
Usar valores diferentes para a unidade fr compartilhará o espaço proporcionalmente. Valores maiores recebem mais espaço livre. Na demonstração abaixo, altere o valor da terceira faixa.
A função minmax()
Essa função significa que é possível definir um tamanho mínimo e máximo para uma faixa.
Isso pode ser bastante útil.
Se considerarmos o exemplo da unidade fr
acima, que distribui o espaço restante,
poderia ser escrita usando
minmax()
como minmax(auto, 1fr)
.
A grade analisa o tamanho intrínseco do conteúdo,
distribui o espaço disponível depois de fornecer espaço suficiente ao conteúdo.
Isso significa que talvez você não receba faixas com uma parcela igual
de todo o espaço disponível no contêiner da grade.
Para forçar uma faixa a ter uma parcela igual do espaço no contêiner da grade menos as lacunas, 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 pegar todo o tamanho disponível no contêiner,
deduzir o tamanho necessário para quaisquer lacunas,
e compartilhe o restante de acordo com suas unidades fr.
Notação repeat()
Se você deseja criar uma grade de controle de 12 colunas com colunas iguais, use o CSS a seguir.
.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 escrevê-lo 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 sua lista de faixas.
Por exemplo, você pode repetir um padrão de trilhas.
Você também pode ter algumas faixas regulares e uma seção repetida.
.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 da faixa,
minmax()
, e repita,
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 quiser criar a quantidade que couber no seu contêiner.
Para isso, use repeat()
e as palavras-chave auto-fill
ou auto-fit
.
Na demonstração abaixo da grade, serão criadas quantas faixas de 200 pixels couberem no contêiner.
Abra a demonstração em uma nova janela e veja como a grade muda conforme você altera o tamanho da janela de visualização.
Nela, recebemos quantas faixas couberem.
No entanto, os cursos não são flexíveis.
Você verá uma lacuna no final, até que haja espaço suficiente para outra faixa de 200 pixels.
Se você adicionar a função minmax()
,
você pode solicitar quantas faixas couberem com tamanho mínimo de 200 pixels e máximo de 1 fr.
Em seguida, a grade mostra as faixas de 200 pixels e o espaço restante é distribuído igualmente a elas.
Isso cria um layout responsivo bidimensional sem a necessidade de consultas de mídia.
Há uma diferença sutil entre auto-fill
e auto-fit
.
Na próxima demonstração, com um layout de grade usando a sintaxe explicada acima,
mas com apenas dois itens no contêiner.
Usando a palavra-chave auto-fill
, é possível ver que faixas vazias foram criadas.
Mude a palavra-chave para auto-fit
, e as faixas serão recolhidas para o tamanho 0.
Isso significa que os trilhos flexíveis agora crescem para consumir o espaço.
Caso contrário, as palavras-chave auto-fill
e auto-fit
vão agir exatamente da mesma forma.
Não há diferença entre eles depois que a primeira faixa é preenchida.
Posicionamento automático
Você já viu o posicionamento automático da grade 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 que você precisa. Se precisar de mais controle, há algumas coisas que convém fazer. A primeira é ajustar o layout de posicionamento automático.
Colocar itens em colunas
O comportamento padrão do layout de grade é colocar itens ao longo das linhas.
Em vez disso, você pode fazer com que os itens sejam colocados em colunas usando grid-auto-flow: column
.
É preciso definir faixas de linha. Caso contrário,
os itens vão criar faixas de coluna intrínsecas,
e organizar tudo em uma longa linha.
Esses valores estão relacionados ao modo de escrita do documento.
Uma linha sempre é executada na direção em que uma frase é executada no modo de escrita do documento ou componente.
Na próxima demonstração, você poderá mudar o modo do valor de grid-auto-flow
e da propriedade writing-mode
.
Como abranger faixas
Você pode fazer com que alguns ou todos os itens de um layout posicionado automaticamente abranjam mais de uma faixa.
Use a palavra-chave span
mais o número de linhas a serem incluídas como um valor de 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
,
que usa o valor inicial de auto
e é posicionado 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 posicionado automaticamente com alguns itens abrangendo várias faixas
pode resultar em uma grade com algumas células não preenchidas.
O comportamento padrão do layout de grade com um layout totalmente posicionado automaticamente.
é sempre progredir.
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 encaixar 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 aplicará o modo de empacotamento denso.
Isso é ativado ao atribuir ao grid-auto-flow
o valor dense
.
Com esse valor definido,
a grade usará itens mais tarde no layout e os usará para preencher as lacunas.
Isso pode significar que a tela se desconecta da ordem lógica.
Colocação de itens
Você já tem várias funcionalidades da grade CSS. Agora, vejamos como posicionamos 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 os itens na grade é colocá-los de uma linha para outra. Você descobrirá outras maneiras de colocar itens neste guia, mas você sempre tem acesso a essas linhas numeradas.
As propriedades que você pode usar para colocar itens por número de linha são:
Elas têm abreviações que permitem definir as linhas inicial e final de uma só vez:
Para colocar seu item, defina as linhas inicial e final da área da grade na qual ele deve 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 você verificar onde o item está posicionado.
A numeração das linhas segue o modo de escrita e a direção do componente. Na próxima demonstração, altere o modo ou a direção de escrita para conferir como o posicionamento dos itens permanece consistente na maneira como o texto flui.
Empilhamento de itens
Usando 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 vêm mais tarde na fonte serão exibidos acima dos itens que vieram anteriormente.
É possível mudar essa ordem de empilhamento usando z-index
, assim como com os itens posicionados.
Números de linha negativos
Quando você cria uma grade usando grid-template-rows
e grid-template-columns
você cria o que é conhecido como grade explícita.
Esta é uma grade que você definiu e deu tamanho às trilhas.
Às vezes, você terá itens que serão exibidos fora dessa grade explícita.
Por exemplo:
é possível definir faixas de coluna e, em seguida, adicionar várias linhas de itens de grade sem nunca defini-las.
As faixas serão dimensionadas automaticamente por padrão.
Também é possível posicionar um item usando grid-column-end
que esteja fora da grade explícita definida.
Em ambos os casos, a grade criará faixas para fazer o layout funcionar,
e essas faixas são chamadas de grade implícita.
Na maioria das vezes, não fará diferença se você estiver trabalhando com uma grade implícita ou explícita. No entanto, com o posicionamento baseado em linha, é possível encontrar a principal diferença entre os dois.
Usando números de linha negativos, você pode posicionar itens da linha final da grade explícita.
Isso pode ser útil se você quiser que um item se estenda da primeira até a última linha da coluna.
Nesse caso, use grid-column: 1 / -1
.
O item será esticado até a grade explícita.
No entanto, isso só funciona para a grade explícita. Criar um layout de três linhas de itens posicionados automaticamente onde você gostaria que o primeiro item se estendesse até a linha final da grade.
Você pode dar grid-row: 1 / -1
a esse item.
Na demonstração abaixo, você pode notar que isso não funciona.
As trilhas são criadas na grade implícita,
não há como chegar ao fim da grade usando -1
.
Como dimensionar faixas implícitas
As faixas criadas na grade implícita serão dimensionadas automaticamente por padrão.
No entanto, se você quiser controlar o tamanho das linhas,
use o método
propriedade grid-auto-rows
,
e para as 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 largas de 100 px e 200 px. Neste caso, a primeira coluna implícita será de 100px, a segunda de 200px, no terceiro 100px e assim por diante.
.container {
display: grid;
grid-auto-columns: 100px 200px;
}
Linhas de grade nomeadas
Pode facilitar a colocação de itens em um layout se as linhas tiverem um nome em vez de um número. Você pode nomear qualquer linha da grade adicionando um nome de sua preferência entre colchetes. É possível adicionar vários nomes, separadas por um espaço dentro dos mesmos colchetes. Depois de nomear as linhas, elas podem ser usadas no lugar 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 de modelo de grade
Você também pode nomear áreas da grade e colocar itens nessas áreas. Essa é uma ótima técnica, pois permite que você veja como seu componente fica no CSS.
Para começar, dê um nome aos filhos diretos do contêiner da grade usando o
Propriedade grid-area
:
header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
footer {
grid-area: footer;
}
O nome pode ser o que você quiser, exceto as palavras-chave auto
e span
.
Depois que todos os seus itens forem nomeados,
use o método
grid-template-areas
para definir quais células da grade cada item abrangerá.
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";
}
Existem algumas regras ao usar grid-template-areas
.
- O valor precisa ser uma grade completa, sem células vazias.
- Para abranger 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 um espaço em branco na grade, use uma .
ou múltiplos sem espaço 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,
torna simples a redefinição do layout usando consultas de mídia.
No próximo exemplo, criei um layout de duas colunas que se move para três colunas
redefinindo o valor de grid-template-columns
e grid-template-areas
.
Abra o exemplo em uma nova janela para testar o tamanho da janela de visualização e conferir a mudança do layout.
Você também pode ver como a propriedade grid-template-areas
está relacionada a writing-mode
e direção.
assim como acontece com outros métodos de grade.
Propriedades abreviadas
Há duas propriedades abreviadas que permitem definir muitas das propriedades de grade de uma só vez. Pode parecer um pouco confuso até você entender exatamente como eles funcionam juntos. Você decide se quer usá-los ou se prefere usar a mão longa.
grid-template
O grid-template
é uma abreviação de grid-template-rows
, grid-template-columns
e grid-template-areas
.
As linhas são definidas primeiro,
com o valor de grid-template-areas
.
O dimensionamento das colunas é 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
O grid
Ela pode ser usada exatamente da mesma forma que a abreviação grid-template
.
Quando usada dessa maneira, ela redefine as outras propriedades de grade aceitas 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
Como alternativa, é possível 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 para
flexbox;
Na grade, as propriedades que começam com justify-
são sempre usadas no eixo 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
: distribuir o espaço adicional no contêiner da grade ao redor ou entre os trilhos.justify-self
ealign-self
: são aplicadas a um item da grade para movê-lo dentro da área da grade na qual está colocado.justify-items
ealign-items
: são aplicadas ao contêiner da grade para definir todas as propriedadesjustify-self
nos itens.
Distribuição de espaço extra
Nesta demonstração, a grade é maior do que o espaço necessário para colocar as faixas de largura fixa.
Isso significa que temos espaço nas dimensões em linha e em bloco da grade.
Teste valores diferentes de align-content
e justify-content
para conferir como as faixas se comportam.
Observe como as lacunas se tornam maiores ao usar valores como space-between
,
e qualquer item da grade abrangendo duas faixas também cresce para absorver o espaço adicional adicionado à lacuna.
Mover conteúdo
Itens com uma cor de plano de fundo parecem preencher completamente a área da grade em que sã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 ver como isso altera o layout.
A área da grade não muda de tamanho,
mas 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 do CSS?
main { display: grid; }
Qual é a direção padrão do layout de uma grade?
Qual é a diferença entre auto-fit
e auto-fill
?
auto-fit
vai esticar um contêiner para ajustá-lo aos filhos, enquanto auto-fill
faz com que os filhos se encaixem no contêiner.auto-fit
alongará as células para que se ajustem ao contêiner, mas auto-fill
não.O que é o min-content
?
O que é o max-content
?
O que é a seleção automática de canais?
grid-area
e são colocados nessa célula.Recursos
Este guia deu a você uma visão geral das diferentes partes da especificação do layout de grade. Para saber mais, confira os recursos a seguir.