Esse é o episódio de número 1 da série Aprenda grid. No episódio 0 eu expliquei os requisitos necessários para um melhor entendimento e também falei o que você irá aprender ao final dessa série.
Hoje vamos aprender como é que se define uma grid. E também vou mostrar mais umas coisinhas legais.
PS: O código utilizado nesse post está aqui.
Vamos lá! Primeiro preciso que você crie um arquivo HTML e crie uma div pai contendo 6 divs filhas.
Criando o arquivo HTML com o layout.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Grid Layout - Parte 1</title>
</head>
<body>
<div class="grid">
<div class="grid-item color-1">1</div>
<div class="grid-item color-2">2</div>
<div class="grid-item color-3">3</div>
<div class="grid-item color-4">4</div>
<div class="grid-item color-5">5</div>
<div class="grid-item color-6">6</div>
</div>
</body>
</html>
Repare que eu coloquei algumas classes nessas divs, mas acredito que não é nada duvidoso para você.
É importante ressaltar que eu pedi para ser 6 divs filhas, mas poderia ser quantas você quiser. Escolhi 6 para tentar fazer uma quantidade legal de colunas e linhas.
Ainda não acontece nada com o nosso exemplo acima. Agora vamos realmente definir uma grid nesse arquivo com CSS.
Definindo a grid no CSS.
Por questões de praticidade, vou incluir o CSS dentro da tag style no mesmo arquivo.
Então dentro da tag style, coloque isto:
*{
margin: 0;
font-family: arial;
}
.color-1{
background-color: #1C35CF;
}
.color-2{
background-color: #8A33FA;
}
.color-3{
background-color: #BD43C0;
}
.color-4{
background-color: #DD375B;
}
.color-5{
background-color: #1A9541;
}
.color-6{
background-color: #D44024;
}
.grid{
display: grid;
}
.grid-item{
color: white;
padding: 20px;
}
O começo do código você já sabe. Só estou definindo a cor de fundo de cada grid-item para uma melhor visualização.
O Segredo está no código da div grid. Para definir uma grid, precisamos colocar display: grid; na div pai.
Vamos ver como ficou.
Veja que ficou todas com uma configuração normal, como se fosse um display: block; Porém, eu te garanto: já criamos nossa grid. Tudo o que precisamos fazer é dizer como vamos querer as nossas colunas e linhas a partir de agora.
Estilizando a grid definindo suas colunas e linhas.
Vamos trabalhar com duas propriedades CSS: grid-template-columns e grid-template-rows.
Essas propriedades devem ser definidas na div que leva o display:grid, ou seja, deverão ser definidas na div pai.
.grid{
display: grid;
grid-template-columns: 500px 400px;
}
Veja que em grid-template-columns eu tenho dois valores: 500px e 400px. Isso significa que estou criando 2 colunas no template da minha grid, uma de 500px e outra de 400px.
Importante: Você pode definir quantas colunas quiser e de qualquer tamanho. Basta acrescentar mais um valor como no exemplo:
.grid{
display: grid;
grid-template-columns: 500px 400px 200px;
}
Perceba que agora temos 3 colunas. Uma primeira de 500px, a segunda de 400px e a última de 200px. Agora quero que você se atente para outra coisa: Temos 6 itens/elementos dentro da nossa grid. Veja que quando você define apenas 2 colunas, o resultado é 2 colunas e 3 linhas, já se definir 3 colunas, passamos a ter apenas 2 linhas. É matemática simples: 6 elementos dividido em 2 colunas = 3 linhas.
Vamos trabalhar com 2 colunas.
Veja que as linhas ficaram com a mesma largura. A propriedade grid-template-rows serve para definir a altura de cada linha.
Essa propriedade funciona parecida com a das colunas. Ela também recebe vários valores (dentro do limite de linhas que a grid possui)
Exemplo:
.grid{
display: grid;
grid-template-columns: 500px 400px;
grid-template-rows: 200px 150px;
}
Veja que estou definindo a altura de 200px para a primeira linha e 150px para a segunda.
"AHHH Gabriell, você esqueceu de de definir a última linha. Já que são duas colunas.". Realmente ta faltando definir a última linha! Mas eu fiz isso de propósito, pois queria te mostrar uma nova propriedade: grid-auto-rows.
Veja que sem definir a altura da última linha, o resultado fica desse jeito:
A terceira linha tem seu valor deixado como padrão. Nada de novo.
Resolver esse problema é muito fácil. Basta você acrescentar mais um valor em grid-template-rows ou então definir o valor dela em grid-auto-rows.
Como abaixo:
.grid{
display: grid;
grid-template-columns: 500px 400px;
grid-template-rows: 200px 150px;
grid-auto-rows: 200px;
}
A vantagem do uso de grid-auto-rows é o fato de que essa propriedade define a quantidade de px que você especificou para todas as linhas restantes que não foram declaradas em grid-template-rows. Ou seja, se tívessemos 5 linhas, A primeira seria de 200px, a segunda de 150px e todas as outras de 200px.
Nesse caso como é somente uma linha a mais, prefiro declarar junto com as outras.
Colocando espaçamento nas colunas e linhas.
Você percebe que as colunas e linhas estão todas juntas. Para fazer o efeito da primeira imagem do post, utilizaremos a propiedade grid-gap que é a junção de outras duas: grid-row-gap e grid-column-gap.
grid-gap recebe até dois valores. Se você especificar somente um, ela vai atribuir aquela medida para o espaçamento das linhas e colunas.
Exemplo:
.grid{
display: grid;
grid-template-columns: 500px 400px;
grid-template-rows: 200px 150px 200px;
grid-gap: 10px;
}
Estou definindo 10px de espaçamento entre as linhas e colunas.
Porém, posso definir espaçamentos diferentes para as linhas e colunas:
Exemplo:
.grid{
display: grid;
grid-template-columns: 500px 400px;
grid-template-rows: 200px 150px 200px;
grid-gap: 30px 20px;
}
Onde 30px é o espaçamento entre as linhas e 20px entre as colunas.
Legal. Concluímos o primeiro post da série.
Ainda vão ter outros. Então, fica de olho nas redes sociais, que é onde eu coloco se tem post novo.
Para esse tutorial usei HTML e CSS.