Propriedade grid-template-columns
Última atualização: 2026-09-13
grid-template-columns Propriedade grid-template-columns
A propriedade grid-template-columns define o número e a largura das trilhas de coluna em um contêiner grid. Ao especificar o tamanho de cada trilha de coluna, você controla com precisão a estrutura das colunas, o que a torna uma das configurações centrais do CSS Grid. Ela suporta comprimentos fixos, porcentagens, a unidade fr e funções poderosas como repeat() e minmax().
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-template-columns: none | <track-list> | <auto-track-list>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Nenhuma trilha de coluna explícita |
<track-list> | <auto-track-list> | Tipo | Lista de trilhas |
repeat() | Função | Definição repetida de trilhas |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-columns | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： A unidade fr (fração) representa uma parte do espaço disponível. Por exemplo, 1fr 2fr divide o espaço restante entre duas colunas na proporção de 1:2.
Dica： repeat(3, 1fr) é equivalente a 1fr 1fr 1fr e é muito mais conciso para muitas trilhas repetidas.
❓ Perguntas Frequentes
QQual é a diferença entre grid-template-columns e grid-auto-columns?
AO grid-template-columns define as trilhas de coluna declaradas explicitamente, a estrutura principal do grid. O grid-auto-columns controla a largura das colunas implícitas: quando um item do grid é colocado além das colunas explícitas, as colunas extras que o navegador cria automaticamente são implícitas. Por exemplo, com apenas duas colunas definidas, o terceiro item e os seguintes caem em colunas implícitas governadas por grid-auto-columns.
QO que significa minmax(200px, 1fr)?
AO minmax() define uma faixa para o tamanho da trilha: um mínimo de 200px e um máximo de 1fr. A coluna tem pelo menos 200px de largura, se estica de acordo com 1fr quando há espaço e permanece em 200px quando o espaço é apertado. É frequentemente combinado com repeat(auto-fill, minmax(200px, 1fr)) para o navegador decidir o número de colunas pela largura do contêiner, gerando um grid responsivo sem media queries.
QQual é a diferença entre auto-fill e auto-fit?
AAmbos funcionam com repeat() para adaptar o número de colunas à largura do contêiner. O auto-fill cria o máximo de colunas possível e mantém trilhas vazias mesmo quando não há conteúdo para nelas colocar, então as larguras das colunas ficam estáveis. O auto-fit recolhe as trilhas vazias para 0 e deixa as colunas com conteúdo esticar para preencher toda a linha. Na mesma largura, o auto-fit produz colunas de conteúdo mais largas, o que serve para cards que devem preencher a linha; o auto-fill serve para layouts que precisam manter uma largura de coluna fixa.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Trilhas de Linha do Grid
Define o número e a altura das trilhas de linha do grid.
Atalho Grid
Atalho que define um grid em uma única declaração.
