Atributo CSS grid-template-columns

Definição e uso

A propriedade grid-template-columns define o número de colunas (e a largura) no layout de grade.

esses valores são uma lista separada por espaços, onde cada valor especifica o tamanho da coluna correspondente.

Crie um contêiner de grade de quatro colunas:

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

Crie um layout de grade de quatro colunas e defina o tamanho de cada coluna:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Valor	Descrição
none	Valor padrão. Crie colunas conforme necessário.
auto	O tamanho da coluna depende do tamanho do contêiner e do tamanho do conteúdo do item na coluna.
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.
length	Defina o tamanho das colunas, usando valores de comprimento válidos. Veja:Unidades de comprimento.
initial	Defina essa propriedade como seu valor padrão. Veja: initial.
inherit	Herda essa propriedade do elemento pai. Veja: inherit.

Valor padrão:	none
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 Nível 1
Sintaxe JavaScript:	object.style.gridTemplateColumns="50px 50px 50px"

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

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