Atributo grid-auto-columns do CSS

Definição e uso

A propriedade grid-auto-columns define o tamanho das colunas no contêiner da grade.

Essa propriedade afeta apenas as colunas que não tiverem tamanho definido.

Veja também:

Tutorial CSS:Layout de grade CSS

Manual CSS:Propriedade grid-auto-rows

Exemplo

Defina o tamanho padrão das colunas da grade:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Experimente você mesmo

Sintaxe CSS

grid-auto-columns: auto|max-content|min-content|length;

Valor da propriedade

Valor Descrição
auto Valor padrão. O tamanho das colunas é determinado pelo tamanho do contêiner.
fit-content()
max-content Defina o tamanho de cada coluna com base no maior item da coluna.
min-content Defina o tamanho de cada coluna com base no menor item da coluna.
minmax(min.max) Defina um intervalo de tamanho que é maior ou igual a min e menor ou igual a max.
length Defina o tamanho das colunas usando valores de comprimento válidos. VejaUnidades de comprimento.
% Defina o tamanho das colunas usando porcentagens.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Suporte. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grade CSS Grid Level 1
Sintaxe do JavaScript: object.style.gridAutoColumns="120px"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44