Grade

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.

1. 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.
2. Os filhos diretos do contêiner da grade serão colocados automaticamente nessa grade.
3. Também é possível colocar os itens no local exato que você quiser.
4. As linhas e áreas na grade podem ser nomeadas para facilitar o posicionamento.
5. O espaço disponível no contêiner da grade pode ser distribuído entre os trilhos.
6. 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:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Elas têm abreviações que permitem definir as linhas inicial e final de uma só vez:

• grid-column
• grid-row

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 e align-content: distribuir o espaço adicional no contêiner da grade ao redor ou entre os trilhos.
• justify-self e align-self: são aplicadas a um item da grade para movê-lo dentro da área da grade na qual está colocado.
• justify-items e align-items: são aplicadas ao contêiner da grade para definir todas as propriedades justify-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

main {
  display: grid;
}

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.

• Layout de grade CSS do MDN
• Um guia completo para a grade
• Como criar um contêiner de grade
• Inspecionar a grade do CSS no Chrome DevTools
• Uma coleção abrangente de materiais didáticos com grade.