Layout em Grade do CSS: Tornando Responsivo

() translation by (you can also view the original English article)

Durante a série, familiarizamo-nos com a sintaxe de Grade, aprendemos maneiras eficientes de posicionar elementos numa página e dissemos adeus a velhos hábitos. Nesse tutorial, aplicaremos esse conhecimento em um projeto web responsivo.

Consultas de Mídia

Usemos a demonstração que fizemos por último.

Declaramos duas grades: a grade principal e a grade aninhada dentro de um dos itens. Podemos controlar quando essas grades entram em ação usando consultas de mídia, permitindo-nos redefinir completamente nosso layout em resoluções diferentes.

Comecemos duplicando a primeira declaração de grade e envolva-a em uma consulta de mídia mobile-first (estou usando 500px como ponto de quebra, valor totalmente arbitrário):

.grid-1 {
    /* grid declaration styles */
}


@media only screen and (min-width: 500px) {

    .grid-1 {
        /* grid declaration styles */
    }

}

Dentro de nossa primeira declaração, mudaremos como nossa grade é definida, posicionando tudo em um coluna. Listaremos apenas uma coluna em grid-template-columns, garantindo que as quatro linhas sejam definidas com grid-template-rows e posicionadas com grid-template-areas:

.grid-1 {
    display: grid;
    width: 100%;
    margin: 0 auto;
    
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto 80px;
    grid-gap: 10px;
    
    grid-template-areas:    "header"
                            "main"
                            "sidebar"
                            "footer";
}

Também definimos grid-gap para 10px por padrão, para compensar as telas menores.

Eis o que obtemos. Usamos nossa consulta de mídia para alterar padding e font-size em nossos itens .grid-1 div.

Nossa Grade Aninhada

Isso resolve o layout principal, mas ainda temos de lidar com a grade aninha que teima em estar em duas colunas o tempo todo. Para resolver isso, faremos o mesmo, mas usando um ponto de quebra diferente, colocando o conteúdo em primeiro lugar:

.item-2 {
    /* grid declaration styles */
}


@media only screen and (min-width: 600px) {

    .item-2 {
        /* grid declaration styles */
    }

}

Veja o resultado no CodePen.

Alguns pontos a se notar:

Como já dito, podemos posicioná-los visualmente independente da ordem do código e as consultas de mídia permitem-nos orderná-los como quisermos em resoluções distintas. Contudo, o aninhamento deve casar com o código fonte: nossos itens de grade aninhados devem ser descendentes tanto visualmente como no código.
Transições CSS não influenciam layout em Grade. Quando nossas consultas de mídia entram em ação e nossas áreas de grade movem-se para novas posições, não é possível deixá-las suaves.

auto-fill e minmax()

Outra abordem responsiva para Grades é ótima para layouts de tijolos (mansory): blocos que se ajustam automaticamente, de acordo com a resolução.

auto-fill

Nossa abordagem, até agora, tem ditado quantas trilhas existem e observado os items encaixarem-se de acordo. Eis o que acontece com a demonstração: temos grid-template-columns: repeat(4, 1fr); significando "crie quatro colunas e dê uma fração de largura para cada".

Com auto-fill podemos ditar o quão largas nossas trilhas são e deixar a Grade descobrir quantas encaixarão no espaço disponível. Nessa demonstração usamos grid-template-columns: repeat(auto-fill, 9em), signficando "crie colunas com 9em de largura e adicione o máximo que puder no container"

Nota: o espaçamento, grid-gap, também entra em consideração.

O container nas demonstrações tem fundo escuro para mostrar quanto de espaço está disponível, e veremos que ele não foi totalmente preenchido no útlimo exemplo. Então, como fazemos?

minmax()

A função minmax() permite configurar tamanhos mínimos e máximos para uma trilha, permitindo a Grade trabalhar com elas. Por exemplo, podemos configurar três colunas, as duas primeiras sendo 1fr de largura e a última com no máximo 1fr de largura e no mínimo 160px:

1	grid-template-columns: 1fr 1fr minmax(160px, 1fr);

Todas as colunas reduzirão de acordo com a tela, mas a última será reduzida apenas áquele ponto. Veja só.

De volta à demonstração do auto-fill, se mudássemos a largura da coluna para minmax(9em, 1fr) a Grade colocaria o máximo de trilhas com 9em possível, mas as ampliaria até o máximo de 1fr até o container ser preenchido:

Aviso: A Grade recalculará as trilhas durante a carga (redimensione a página e recarregue), mas não fará durante o redimensionamento. Pode-se usar consultas de mídia para alterar valores, mas não funcionam com redimensionamento.

Conclusão

Resumamos em uma lista:

Consultas de mídia podem ajudar a rearranjar completamente layouts em Grade ao redefinir grid-template-areas (e outros) para cenários diferentes.
Transições CSS não afetam mudanças realizadas na Grade.
auto-fill é bem útil para preencher containeres de grade.
A função minmax() complementa bem auto-fill, garantindo que containeres sejam preenchidos, mas não nos dá verdadeira "responsividade".

Com as lições aprendidas nessa série, estamos preparados para brincar com nossa Grade! Fique ligado para novos tutorias sobre Grade, exercícios práticos, soluções para problemas comuns de layout e atualizações.

Recursos Úteis

Grades em Exemplos #29: minmax() e span para colunas e linhas, por Rachel Andrew
Vídeos: Rachel Andrew (claro) demonstrando minmax() no layout da página inicial do Tuts+.
Rascunho do Editor da W3C: auto-fill
Rascunho do Editor da W3C: minmax()