Grade

Podcast do CSS - 011: Grade

Um layout realmente comum no web design é um layout de cabeçalho, barra lateral, corpo e rodapé.

Ao longo dos anos, houve muitos métodos para resolver esse layout, mas com a grade CSS, não só é relativamente simples, mas há muitas opções. A grade é excepcionalmente útil para combinar o controle que o dimensionamento externo fornece com a flexibilidade do dimensionamento 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, organizar itens em linhas e colunas ao mesmo tempo.

Ao criar um layout de grade, você define uma grade com linhas e colunas. Depois, coloca itens nessa grade ou permite que o navegador os coloque automaticamente nas células que você criou. Há muito o que fazer em grade, mas com uma visão geral do que está disponível, você vai criar layouts de grade em pouco tempo.

Informações gerais

O que podemos fazer com a grade? Os layouts de grade têm os recursos a seguir. Você aprenderá sobre todos eles neste guia.

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 extra no contêiner da grade pode ser distribuído entre as faixas.
6. Os itens de grade podem ser alinhados dentro da própria área.

Terminologia de grade

A grade vem com várias novas terminologias, já que é a primeira vez que o CSS teve um sistema de layout real.

Linhas de grade

Uma grade é composta de linhas, que correm horizontal e verticalmente. Se sua grade tiver quatro colunas, terá cinco linhas de coluna, incluindo a uma após a última coluna.

As linhas são numeradas a partir de 1, com a numeração seguindo 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 inglês, e à direita, em um idioma da direita para a esquerda, como o árabe.

Faixas em grade

Uma faixa é o espaço entre duas linhas de grade. Uma faixa de linha está entre duas linhas de linhas e uma faixa de coluna entre duas linhas de coluna. Quando criamos nossa grade, criamos essas faixas 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 de faixas de linha e coluna. É como uma célula de tabela ou célula em uma planilha. Se você definir uma grade e não colocar nenhum dos itens, eles serão automaticamente dispostos 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 medianiz ou um beco entre faixas. Para fins de dimensionamento, funcionam como uma faixa normal. Não é possível colocar conteúdo em uma lacuna, mas você pode abranger itens de grade.

Contêiner da grade

O elemento HTML com display: grid aplicado e, portanto, cria um novo contexto de formatação de grade para os filhos diretos.

.container {
  display: grid;
}

Item da grade

Um item da grade é um item 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 faixas de coluna, duas faixas de linha e um intervalo de 10 pixels entre as faixas, conforme 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 trilhas de colunas. Cada faixa usa uma unidade de comprimento diferente. Ele tem duas linhas, uma usando uma unidade de comprimento e outra automática. Quando usado como um recurso de dimensionamento automático de faixas, pode ser considerado como sendo do 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 imediatamente dispostos nessa grade. Confira isso na demonstração abaixo.

A sobreposição de grade no Chrome DevTools ajuda a entender as várias partes da grade.

Abra a demonstração no Chrome. Inspecione o elemento com o segundo plano cinza, que tem um ID container. Para destacar a grade, selecione o selo da grade no DOM, ao lado do elemento .container. Na guia "Layout", selecione Mostrar 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 comprimento e porcentagem, conforme descrito na seção sobre unidades de dimensionamento, os rastreamentos de grade podem usar palavras-chave de tamanho intrínseco. Essas palavras-chave são definidas na especificação de tamanho da caixa e adicionam outros métodos de caixas de dimensionamento no CSS, não apenas faixas de grade.

• min-content
• max-content
• fit-content()

A palavra-chave min-content torna a faixa o menor possível sem ultrapassar o limite do conteúdo. Se o layout de grade de exemplo tiver três faixas de coluna no tamanho min-content, elas ficarão tão estreitas quanto a palavra mais longa na faixa.

A palavra-chave max-content tem o efeito oposto. A faixa se tornará tão larga o suficiente para que todo o conteúdo seja exibido em uma string longa e ininterrupta. Isso pode causar estouros da string, já que ela não será encapsulada.

Inicialmente, a função fit-content() atua como max-content. No entanto, quando a faixa atingir o tamanho que você transmite para a função, o conteúdo vai ser agrupado. Portanto, fit-content(10em) criará uma faixa com menos de 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.

A unidade fr

Já temos dimensões de tamanho, porcentagens e essas novas palavras-chave. Há também um método especial de dimensionamento que funciona apenas no layout de grade. Essa é a unidade fr, um comprimento flexível que descreve uma parte 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 após a disposição dos itens. Portanto, ter três colunas que recebem a mesma parcela de 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 um intervalo de tamanho fixo ou faixas de tamanho fixo. Para que um componente com um elemento de tamanho fixo e a segunda faixa ocupe o espaço restante, você pode usar como uma lista de faixas de grid-template-columns: 200px 1fr.

Se você usar valores diferentes para a unidade fr, o espaço será compartilhado proporcionalmente. Valores maiores recebem mais espaço livre. Na demonstração abaixo, mude o valor da terceira faixa.

A função minmax()

Esta função significa que você pode definir um tamanho mínimo e um tamanho máximo para uma faixa. Isso pode ser bastante útil. Se usarmos o exemplo da unidade fr acima, que distribui o espaço restante, ele poderia ser escrito 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 fornecer espaço suficiente. Isso significa que talvez você não encontre faixas se elas tiverem a mesma parcela de todo o espaço disponível no contêiner da grade.

Para forçar uma faixa a ocupar a mesma parcela 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. Em seguida, a grade analisará todo o tamanho disponível no contêiner, deduzirá o tamanho necessário para lacunas e compartilhará o restante de acordo com suas unidades de fr.

repeat() notação

Para criar uma grade de rastreamento 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 então, 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 página "Detalhes do app". Por exemplo, você pode repetir um padrão de faixas. Você também pode ter algumas faixas regulares e uma seção que se repete.

.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 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, em vez disso, queira criar quantas couberem no seu contêiner.

Você pode fazer isso com repeat() e as palavras-chave auto-fill ou auto-fit. Na demonstração abaixo, a grade criará quantas faixas de 200 pixels couberem no contêiner. Abra a demonstração em uma nova janela e veja como a grade muda quando você muda o tamanho da janela de visualização.

Na demonstração, o número de faixas é adequado para você. No entanto, as faixas 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(), poderá solicitar quantas faixas couberem com um tamanho mínimo de 200 pixels e um máximo de 1 fr. Em seguida, a grade traça as faixas de 200 pixels e qualquer espaço restante é distribuído igualmente entre 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, use um layout de grade usando a sintaxe explicada acima, mas com apenas dois itens no contêiner da grade. Usando a palavra-chave auto-fill, é possível notar que as faixas vazias foram criadas. Mude a palavra-chave para auto-fit, e as faixas vão ser recolhidas para 0. Isso significa que as faixas flexíveis agora consomem o espaço.

As palavras-chave auto-fill e auto-fit agem exatamente da mesma maneira. Não haverá diferença entre eles quando a primeira faixa for preenchida.

Posicionamento automático

Você já viu o posicionamento automático de 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 você pode 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, faça 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 definir o layout de todas em uma única linha longa.

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ê pode mudar o modo do valor de grid-auto-flow e da propriedade writing-mode.

Faixas amplas

Você pode fazer com que alguns ou todos os itens em um layout posicionado automaticamente incluam mais de uma faixa. Use a palavra-chave span mais o número de linhas para abranger 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 é posicionado de acordo com as regras de posicionamento automático. Também é possível especificar o mesmo item usando a abreviação grid-column:

.item {
    grid-column: auto / span 2;
}

Preencher 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 avançar. Os itens serão colocados de acordo com a ordem em que estiverem na origem ou de 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. Para isso, atribua o valor dense a grid-auto-flow. Com esse valor aplicado, a grade vai usar os itens mais tarde no layout e preencher as lacunas. Isso pode significar que a tela é desconectada da ordem lógica.

Colocando itens

Você já tem muitas funcionalidades da grade CSS. Agora vamos conferir como posicionamos os itens na grade que criamos.

A primeira coisa a ser lembrada é que o Layout de grade CSS é baseado em uma grade de linhas numeradas. A maneira mais simples de colocar itens na grade é colocá-los de uma linha para outra. Você vai descobrir outras maneiras de colocar itens neste guia, mas é sempre possível acessar essas linhas numeradas.

As propriedades que você pode usar para posicionar itens por número de linha são:

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

Eles têm abreviações que permitem definir as linhas de início e fim de uma só vez:

• grid-column
• grid-row

Para posicionar seu 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 oferecer um guia visual das linhas para verificar onde o item é colocado.

A numeração das linhas segue o modo de escrita e a direção do componente. Na próxima demonstração, mude o modo ou a direção de escrita para conferir como o posicionamento dos itens permanece consistente com a maneira como o texto flui.

Itens empilhados

Usando o posicionamento baseado em linha, você pode colocar itens na mesma célula da grade. Isso significa que você pode empilhar itens ou fazer com que um item se sobreponha parcialmente. Os itens que vêm mais tarde na fonte são exibidos sobre os itens que vêm mais cedo. É 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. Essa é uma grade que você definiu e deu tamanho às faixas.

Às vezes, você terá itens que sã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 definir faixas de linhas. As faixas são dimensionadas automaticamente por padrão. Também é possível colocar um item usando grid-column-end, que está fora da grade explícita definida. Em ambos os casos, a grade cria faixas para fazer o layout funcionar, e essas faixas são chamadas de grade implícita.

Na maioria das vezes, isso não fará diferença se você estiver trabalhando com uma grade implícita ou explícita. No entanto, com o posicionamento com base em linhas, você pode 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ê desejar que um item se estenda da primeira até a última linha da coluna. Nesse caso, use grid-column: 1 / -1. O item será esticado para a direita na grade explícita.

No entanto, isso só funciona para a grade explícita. Escolha 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 dar grid-row: 1 / -1 a esse item. Na demonstração abaixo, é possível ver 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.

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 dimensionamento das linhas, use a 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 de 100px e 200px de largura. Nesse caso, a primeira coluna implícita terá 100 px, a segunda terá 200 px, a terceira 100 px 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 em sua grade adicionando um nome de sua escolha entre colchetes. Vários nomes podem ser adicionados, separados por 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 do modelo de grade

Você também pode nomear áreas da grade e colocar itens nessas áreas nomeadas. Essa é uma técnica maravilhosa, porque permite que você veja a aparência do seu componente 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 o que você quiser, exceto as palavras-chave auto e span. Depois que todos os itens forem nomeados, use a propriedade grid-template-areas para definir quais células de 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, 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ç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, é fácil redefinir o layout usando consultas de mídia. No próximo exemplo, criei um layout de duas colunas que se move para três colunas reiniciando 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 ver a mudança no layout.

Você também pode conferir como a propriedade grid-template-areas se relaciona com writing-mode e direção, como acontece com outros métodos de grade.

Propriedades abreviadas

Há duas propriedades abreviadas que permitem definir muitas das propriedades da grade de uma só vez. Pode parecer um pouco confusa até que você analise exatamente como elas se encaixam. Você decide se quer usá-los ou usar os longhands.

grid-template

A propriedade grid-template é uma abreviação 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 usada dessa maneira, ela redefine as outras propriedades da grade aceitas para os valores iniciais delas. O conjunto completo é:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Como alternativa, use 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 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 gravação.

• justify-content e align-content: distribuem mais espaço no contêiner de grade ao redor ou entre as faixas.
• justify-self e align-self: são aplicados a um item da grade para movê-lo dentro da área da grade em que ele é colocado.
• justify-items e align-items: são aplicados 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 que o espaço necessário para dispor 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.

As lacunas aumentam ao usar valores como space-between, e qualquer item de grade que abrange duas faixas também cresce para absorver o espaço extra adicionado à lacuna.

Como mover conteúdo

Itens com uma cor de plano de fundo parecem preencher completamente a área de 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 conferir como isso altera o layout. A área da grade não muda de tamanho, em vez disso, os itens estão sendo movidos dentro da área definida.

Teste seu conhecimento

Teste seus conhecimentos sobre grade

main {
  display: grid;
}

Recursos

Este guia fornece uma visão geral das diferentes partes da especificação de layout de grade. Para saber mais, dê uma olhada nos 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 CSS no Chrome DevTools
• Coleção abrangente de materiais de aprendizado em grade