Texto longo, leia o resumo
Se você está familiarizado com o Flexbox, o Grid deve ser familiar. Rachel Andrew tem um ótimo site dedicado ao CSS Grid para ajudar você a começar. A grade já está disponível no Google Chrome.
Flexbox? Grade?
Nos últimos anos, o CSS Flexbox se tornou amplamente usado e o suporte a navegadores está muito bom (a menos que você seja uma das pessoas mais pobres que precisam oferecer suporte ao IE9 e versões anteriores). O Flexbox facilitou muitas tarefas complexas de layout, como espaçamento equidistante entre elementos, layouts de cima para baixo ou o Santo Graal da mágica do CSS: centralização vertical.
Infelizmente, as telas geralmente têm uma segunda dimensão com a qual precisamos nos preocupar. Além de cuidar do dimensionamento dos elementos por conta própria, não é possível ter um ritmo vertical e horizontal ao mesmo tempo usando apenas o flexbox. É aqui que a grade CSS vem para ajudar.
O CSS Grid está em desenvolvimento, atrás de um sinalizador na maioria dos navegadores há mais de cinco anos, e foi gasto mais tempo na interoperabilidade para evitar um lançamento com limitações, como o Flexbox. Portanto, se você usar a grade para implementar o layout no Chrome, provavelmente terá o mesmo resultado no Firefox e no Safari. No momento em que este artigo foi escrito, a implementação de grade da Microsoft no Edge está desatualizada (a mesma que já estava presente no IE11) e a atualização está "em consideração".
Apesar das semelhanças de conceito e sintaxe, não pense no Flexbox e no Grid como técnicas de layout concorrentes. A grade é organizada em duas dimensões, enquanto o Flexbox é exibido em uma. Há sinergia quando os dois são usados juntos.
Como definir uma grade
Para se familiarizar com as propriedades individuais do Grid, recomendo fortemente o livro Grid By Example, de Rachel Andrew, ou a Folha de referências da CSS Tricks. Se você conhece o Flexbox, conheça muitas das propriedades e os significados delas.
Vejamos um layout de grade padrão de 12 colunas. O layout clássico de 12 colunas é muito usado, porque o número 12 é divisível por 2, 3, 4 e 6 e, portanto, é útil para muitos designs. Vamos implementar este layout:
Vamos começar com nosso código de marcação:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Na folha de estilo, começamos expandindo o body para que ele cubra toda a janela de visualização e o transformamos em um contêiner de grade:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Agora estamos usando a grade CSS. Oba!
A próxima etapa é implementar as linhas e colunas da grade. Poderíamos implementar todas as 12 colunas em nosso modelo, mas como não estamos usando cada coluna, isso tornaria nosso CSS desnecessariamente confuso. Para simplificar, vamos implementar o layout desta forma:
O cabeçalho e o rodapé têm largura variável, e o conteúdo é variável em ambas as dimensões. A navegação também será variável em ambas as dimensões, mas vamos impor uma largura mínima de 200 px. Por quê? Para mostrar os recursos da grade CSS, é claro.
Na grade CSS, o conjunto de colunas e linhas é chamado de faixas. Vamos começar definindo nosso primeiro conjunto de trilhas, as linhas:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows usa uma sequência de tamanhos que definem as linhas individuais.
Neste caso, damos à primeira linha uma altura de 150px e a última, de 100px.
A linha do meio é definida como auto, o que significa que ela se ajustará à altura necessária para acomodar os itens de grade (os filhos do contêiner de grade) nessa linha. Como nosso corpo está esticado em toda a janela de visualização, a faixa
que contém o conteúdo (amarelo na imagem acima) vai preencher todo
o espaço disponível, mas vai aumentar (e fazer o documento rolar) se isso
for necessário.
Para as colunas, queremos ter uma abordagem mais dinâmica: queremos que a navegação e o conteúdo aumentem (e diminuam), mas queremos que a navegação nunca diminua para menos de 200 px, e queremos que o conteúdo seja maior que a navegação. No Flexbox, usaríamos flex-grow e flex-tuning, mas na grade é um pouco diferente:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Definimos duas colunas. A primeira coluna é definida usando a função minmax(), que aceita dois valores: o tamanho mínimo e o máximo dessa faixa.
Por exemplo, min-width e max-width em um. A largura mínima é, como
discutimos anteriormente, 200 px. A largura máxima é 3fr. fr é uma unidade específica
que permite distribuir o espaço disponível para os elementos da grade.
fr provavelmente significa "unidade de fração", mas também pode significar unidade livre em breve.
Nossos valores aqui significam que ambas as colunas crescerão para preencher a tela, mas a coluna de conteúdo sempre terá três vezes a largura da coluna de navegação (desde que a coluna de navegação permaneça mais larga que 200 px).
Embora o posicionamento dos itens da grade ainda não esteja correto, o tamanho das linhas e colunas se comporta corretamente e gera o comportamento que esperávamos:
Colocar os itens
Um dos recursos mais eficientes da grade é a capacidade de posicionar itens sem considerar a ordem do DOM. No entanto, como os leitores de tela navegam pelo DOM,
recomendamos que, para ser devidamente acessível, você esteja atento à forma como
reordena os elementos. Se nenhum posicionamento manual for feito, os elementos serão colocados na grade na ordem do DOM, organizados da esquerda para a direita e de cima para baixo. Cada elemento ocupa uma célula. A ordem em que a grade é preenchida pode ser alterada usando
grid-auto-flow.
Então, como colocamos os elementos? A maneira mais fácil de colocar itens da grade é definir as colunas e linhas que eles abrangem. A grade oferece duas sintaxes para fazer isso: na primeira, você define pontos de início e fim. No segundo, você define um ponto inicial e um período:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
O cabeçalho deve começar na primeira coluna e terminar antes da terceira coluna. Nossa navegação deve começar na segunda linha e abranger duas linhas no total.
Tecnicamente, terminamos de implementar nosso layout, mas quero mostrar alguns recursos convenientes que a grade oferece para facilitar o posicionamento. O primeiro recurso é que você pode nomear as bordas das faixas e usar esses nomes para posicionamento:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
O código acima produzirá o mesmo layout do código anterior.
O recurso de nomear regiões inteiras na sua grade é ainda mais eficaz:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas usa uma string de nomes separados por espaços, permitindo que o
desenvolvedor dê um nome a cada célula. Se duas células adjacentes tiverem o mesmo nome,
elas serão agrupadas na mesma área. Dessa forma, você pode fornecer mais
semântica ao código de layout e tornar as consultas de mídia mais intuitivas. Novamente, esse
código gera o mesmo layout de antes.
Há mais?
Isso mesmo. É muita coisa para abordar em uma única postagem do blog. Rachel Andrew, que também é GDE, é uma especialista convidada no grupo de trabalho do CSS e trabalha com ela desde o início para garantir que o Grid simplifique o Web design. Ela até escreveu um livro sobre isso. O site dela, Grid By Example, é um recurso valioso para se familiarizar com o Grid. Muitas pessoas acham que a grade é um passo revolucionário para o web design e agora é ativada por padrão no Chrome para que você possa começar a usá-la hoje mesmo.