Propriedade de Trilha de Coluna Implícita
Última atualização: 2026-09-13
grid-auto-columns Propriedade de Trilha de Coluna Implícita
A propriedade grid-auto-columns controla a largura das trilhas de coluna criadas implicitamente em um contêiner de grid. Quando um item do grid é posicionado em uma coluna que grid-template-columns não definiu, o navegador cria automaticamente uma coluna implícita; essa propriedade define o tamanho dessas colunas criadas automaticamente. É muito útil ao lidar com conteúdo dinâmico ou um número desconhecido de itens do grid.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-auto-columns: <track-size>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Calculado automaticamente |
<length> | <percentage> | Tipo | Largura fixa de coluna implícita |
minmax() | Função | Tamanho mínimo/máximo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-columns | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： As colunas implícitas geralmente aparecem porque um item foi posicionado explicitamente em uma coluna além do grid explícito.
Dica： minmax(100px, auto) dá a uma coluna implícita uma largura mínima enquanto a deixa se esticar com o conteúdo.
❓ Perguntas Frequentes
QQuando grid-auto-columns e grid-template-columns se aplicam ao mesmo tempo?
AUma coluna implícita é criada sempre que um item do grid cai em uma coluna que grid-template-columns não definiu, e grid-auto-columns decide a largura dessas colunas extras. Por exemplo, com apenas duas colunas definidas, um terceiro item (posicionado automaticamente ou na coluna 3 com grid-column) cai em uma coluna implícita. Colunas explícitas e implícitas podem coexistir, cada uma seguindo suas próprias regras de dimensionamento.
QComo faço todas as colunas ficarem com a mesma largura com uma quantidade variável de colunas?
AUse grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). O navegador escolhe o número de colunas com base na largura do contêiner; cada coluna tem pelo menos 200px e se estica quando sobra espaço. O auto-fill cria tantas trilhas com mínimo de 200px quanto couberem, então nenhuma coluna extra é produzida e o grid permanece responsivo em todos os breakpoints sem media queries. Combinado com gap, essa receita dá um grid cujo número de colunas se adapta e cujas larguras permanecem uniformes.
QQuando as colunas implícitas são criadas?
AAs colunas implícitas aparecem quando um item é posicionado além das colunas explícitas. Por exemplo, um contêiner com apenas duas colunas: o terceiro item cai na coluna 3 quando posicionado automaticamente, ou um item é posicionado explicitamente na coluna 4 com grid-column: 4. Essas colunas extras são implícitas e sua largura vem de grid-auto-columns. Listas com rolagem horizontal costumam usar isso: uma primeira coluna explícita e o resto deixado para grid-auto-columns.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Trilhas de Linha Implícitas
Controla a altura das linhas implícitas
Trilhas de Coluna do Grid
Define a estrutura das colunas explícitas
