Container de grade CSS

1
2
3
4
5
6
7
8

Experimente pessoalmente

Contêiner da grade

Para que um elemento HTML atue como contêiner de grade, você deve configurar display A propriedade é configurada como grid ou inline-grid.

O contêiner da grade é composto por itens de grade colocados dentro das colunas e linhas.

A propriedade grid-template-columns

grid-template-columns A propriedade define o número de colunas no layout da grade e pode definir o tamanho de cada coluna.

Este valor é uma lista separada por espaço, onde cada valor define o comprimento correspondente de cada coluna.

Se você desejar que o layout da grade contenha quatro colunas, especifique o tamanho dessas quatro colunas; se todas as colunas devem ter a mesma largura, configure como "auto".

Exemplo

Crie uma grade contendo quatro colunas:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Experimente pessoalmente

Atenção:Se houver mais de 4 itens na grade de 4 colunas, a grade adicionará automaticamente novas linhas e colocará esses itens nelas.

grid-template-columns A propriedade também pode ser usada para especificar o tamanho das colunas (largura).

Exemplo

Defina o tamanho dessas 4 colunas:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Experimente pessoalmente

A propriedade grid-template-rows

grid-template-rows A propriedade define a altura de cada coluna.

1
2
3
4
5
6
7
8

Seus valores são listas separadas por espaço, onde cada valor define a altura correspondente de cada linha:

Exemplo

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Experimente pessoalmente

A propriedade alinhamento do conteúdo

justify-content A propriedade é usada para alinhar todo o grid dentro do contêiner.

1
2
3
4
5
6
7
8

Atenção:A largura total da grade deve ser menor que a largura do contêiner, para que a propriedade justify-content funcione corretamente.

Exemplo

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  justify-content: space-around;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  justify-content: space-between;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  justify-content: center;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  justify-content: start;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  justify-content: end;
}

Experimente pessoalmente

A propriedade alinhamento do conteúdo

alinhamento do conteúdo A propriedade é usada para alinhar verticalmente todo o grid dentro do contêiner.

1
2
3
4
5
6
7
8

Atenção:A altura total da grade deve ser menor que a altura do contêiner, para que a propriedade align-content funcione.

Exemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Experimente pessoalmente

Exemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Experimente pessoalmente