Compreendendo a distinção entre "align-items" e "align-content" no Grid Layout

O módulo Grid Layout apresenta dois conjuntos de propriedades, "justificar/alinhar itens" e "justificar/alinhar conteúdo", que desempenham papéis distintos no alinhamento de itens de grade e da própria grade dentro de uma grade container.

Esclarecimento da terminologia da grade

• Grid Container: O contêiner pai que define o espaço geral da grade.
• Grid: Uma grade estruturada de linhas que divide o contêiner da grade em áreas de grade.
• Grid Itens: Caixas que contêm conteúdo de fluxo dentro das áreas da grade.

Align-items vs. Align-content

O "align- As propriedades items" e "align-content", como seus nomes sugerem, alinham os itens da grade e a grade, respectivamente. Especificamente:

• justify-content e align-content alinham as trilhas da grade dentro da caixa de conteúdo do contêiner da grade.
• justify-self e justify-items alinham os itens da grade na dimensão embutida (horizontal por padrão).
• align-self e align-items alinham itens de grade na dimensão do bloco (vertical por padrão).

Abordando a reivindicação do autor

A afirmação do autor de que as propriedades "-content" existem porque "às vezes o tamanho total da sua grade pode ser menor que o tamanho de seu contêiner de grade" destaca o seguinte:

• Quando a grade é menor que o contêiner de grade, há espaço livre disponível.
• O "justify-content" e as propriedades "align-content" podem utilizar esse espaço para alinhar a grade centralmente ou de outra forma dentro do contêiner.
• Em contraste, se o tamanho da grade for igual ao tamanho do contêiner, não há espaço livre e essas propriedades de alinhamento não tenho efeito.

Ilustrations for Clarity

[Imagem da ilustração do W3C mostrando uma grade menor que seu contêiner, com "justify-content" e "align- content" alinhando a grade dentro do contêiner.]

Trecho da Especificação

Para maior clareza, trechos relevantes de a especificação CSS Grid Layout é fornecida:

• "Os itens da grade podem ser alinhados na dimensão in-line usando a propriedade justify-self no item da grade ou a propriedade justify-items no contêiner da grade."
• "Os itens da grade também podem ser alinhados na dimensão do bloco usando a propriedade align-self no item da grade ou a propriedade align-items no contêiner da grade."
• "Se as bordas externas da grade fazer não corresponderem às bordas de conteúdo do contêiner de grade, as trilhas de grade serão alinhadas dentro da caixa de conteúdo de acordo com as propriedades justificar-content e alinhar-content no contêiner de grade."