Contêiner de grade CSS
1
2
3
4
5
6
7
8
Contêiner de Grade
Para fazer um elemento HTML se comportar como um contêiner de grade, você deve definir a displaypropriedade como
gridou inline-grid.
Os contêineres de grade consistem em itens de grade, colocados dentro de colunas e linhas.
A propriedade grid-template-columns
A grid-template-columnspropriedade define o número de colunas em seu layout de grade e pode definir a largura de cada coluna.
O valor é uma lista separada por espaços, onde cada valor define a largura da respectiva coluna.
Se você quiser que seu layout de grade contenha 4 colunas, especifique a largura das 4 colunas ou "auto" se todas as colunas tiverem a mesma largura.
Exemplo
Faça uma grade com 4 colunas:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Nota: Se você tiver mais de 4 itens em uma grade de 4 colunas, a grade adicionará automaticamente uma nova linha para colocar os itens.
A grid-template-columnspropriedade também pode ser usada para especificar o tamanho (largura) das colunas.
Exemplo
Defina um tamanho para as 4 colunas:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
A propriedade grid-template-rows
A grid-template-rowspropriedade define a altura de cada linha.
1
2
3
4
5
6
7
8
O valor é uma lista separada por espaços, onde cada valor define a altura da respectiva linha:
Exemplo
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
A propriedade justificar-conteúdo
A justify-contentpropriedade é usada para alinhar toda a grade dentro do container.
1
2
3
4
5
6
Observação: a largura total da grade deve ser menor que a largura do contêiner para que a justify-contentpropriedade tenha algum efeito.
Exemplo
.grid-container {
display: grid;
justify-content: space-evenly;
}
Exemplo
.grid-container {
display: grid;
justify-content: space-around;
}
Exemplo
.grid-container {
display: grid;
justify-content: space-between;
}
Exemplo
.grid-container {
display: grid;
justify-content: center;
}
Exemplo
.grid-container {
display: grid;
justify-content: start;
}
Exemplo
.grid-container {
display: grid;
justify-content: end;
}
A propriedade align-content
A align-contentpropriedade é usada para alinhar
verticalmente toda a grade dentro do container.
1
2
3
4
5
6
Nota: A altura total da grade deve ser menor que a altura do contêiner para que a align-contentpropriedade tenha algum efeito.
Exemplo
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Exemplo
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Exemplo
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Exemplo
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Exemplo
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Exemplo
.grid-container {
display: grid;
height: 400px;
align-content: end;
}