Texto longo, leia o resumo
Se você já conhece o Flexbox, o Grid deve parecer familiar. Rachel Andrew mantém 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 utilizado, e o suporte ao navegador está muito bom, a menos que você seja uma das pessoas mais insatisfatórias 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 segredo da magia do CSS: centralização vertical.
Mas, infelizmente, as telas geralmente têm uma segunda dimensão com a qual precisamos nos preocupar. Sem cuidar do tamanho dos elementos, infelizmente 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.
A CSS Grid está em desenvolvimento e está sob uma sinalização na maioria dos navegadores há mais de cinco anos. Além disso, há mais tempo gasto na interoperabilidade para evitar um lançamento bug como o Flexbox. Portanto, se você usar a grade para implementar o layout no Chrome, provavelmente vai ter o mesmo resultado no Firefox e no Safari. No momento em que este artigo foi escrito, a implementação da Grade no Microsoft Edge está desatualizada (o mesmo que já estava presente no IE11), e a atualização está "sob consideração".
Apesar das semelhanças de conceito e sintaxe, não pense em Flexbox e Grid como técnicas de layout concorrentes. A grade é organizada em duas dimensões, enquanto o Flexbox é disposto em uma. Há sinergia ao usar os dois juntos.
Como definir uma grade
Para se familiarizar com as propriedades individuais da grade, recomendo muito o Grid By Example ou a Folha de referências da CSS Tricks. Se você estiver familiarizado com o Flexbox, muitas das propriedades e o significado delas devem ser familiarizados.
Vamos dar uma olhada em um layout padrão de grade de 12 colunas. O layout clássico de 12 colunas é famoso porque o número 12 é divisível por 2, 3, 4 e 6 e, portanto, é útil para muitos designs. Vamos implementar esse layout:
Vamos começar com nosso código de marcação:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Na nossa folha de estilo, começamos expandindo o body para que ele cubra toda a janela de visualização e transformando-o 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 no nosso mockup, mas como não usamos todas elas, fazer isso tornaria o CSS desnecessariamente confuso. Para simplificar, vamos implementar o layout desta maneira:
A largura do cabeçalho e do rodapé varia, 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 imporemos uma largura mínima de 200 pixels. 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 faixas, 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.
Nesse caso, a primeira linha terá 150 px de altura, e a última, 100 px.
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) preencherá pelo menos todo
o espaço disponível, mas aumentará (e fará o documento rolar) se isso for
necessário.
Queremos adotar uma abordagem mais dinâmica para as colunas: queremos que a navegação e o conteúdo aumentem (e diminuam), mas queremos que a navegação nunca seja reduzida para menos de 200 pixels e queremos que o conteúdo seja maior do que a navegação. No Flexbox, usaríamos flex-grow e flex- incorporados, mas no Grid é um pouco diferente:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Estamos definindo duas colunas. A primeira coluna é definida usando a função minmax(), que aceita dois valores: o tamanho mínimo e máximo dessa faixa.
É como 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
da grade 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 a unidade livre em breve.
Nossos valores significam que as duas colunas vão crescer para preencher a tela, mas a
coluna de conteúdo sempre vai ter três vezes a largura da coluna de navegação, desde que
ela 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 pretendido:
Colocando os itens
Um dos recursos mais eficientes da grade é a capacidade de colocar itens sem
considerar a ordem do DOM. No entanto, como os leitores de tela navegam pelo DOM, é altamente recomendável que você esteja ciente de como reordenar os elementos para ter acesso adequado. Se nenhum posicionamento manual for feito, os elementos serão colocados
na grade em ordem 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.
Como colocamos os elementos? Talvez a maneira mais fácil de colocar itens de grade é definindo quais colunas e linhas eles abrangem. A grade oferece duas sintaxes para fazer isso: na primeira sintaxe, você define os pontos inicial e final. 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. A navegação precisa começar na segunda linha e abranger duas linhas no total.
Tecnicamente, terminamos de implementar nosso layout, mas quero mostrar alguns recursos práticos que a grade oferece para facilitar o posicionamento. O primeiro recurso é que você pode nomear as bordas das faixas e usar esses nomes para o 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 vai produzir o mesmo layout que o código anterior.
Ainda mais eficiente é o recurso de nomear regiões inteiras em sua grade:
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, é possível 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?
Sim, há muito conteúdo para abordar em uma única postagem do blog. Rachel Andrew, que também é GDE, é especialista convidado no grupo de trabalho de CSS e trabalha com eles desde o início para garantir que a grade simplifique o design da Web. Ela até escreveu um livro com ele. O site Grid By Example é um recurso valioso para se familiarizar com o Grid. Muitas pessoas acreditam que a grade é um passo revolucionário para o web design e agora ela está ativada por padrão no Chrome para que você possa começar a usá-la hoje mesmo.