Propriedade CSS grid-auto-columns

A propriedade grid-auto-columns define o tamanho das colunas de grid criadas implicitamente — ou seja, colunas que o navegador gera automaticamente quando itens do grid são posicionados fora das colunas que você definiu explicitamente com grid-template-columns.

Por que isso importa: Ao construir um grid, geralmente você declara um número fixo de trilhas. Mas se um item cair em uma coluna que ainda não existe (por exemplo, você posiciona um item em grid-column: 5 em um grid de 3 colunas), o CSS Grid cria essa coluna extra automaticamente. Por padrão, essas colunas geradas automaticamente têm tamanho auto, o que frequentemente as colapsa para caber no conteúdo. A propriedade grid-auto-columns permite controlar a largura que elas devem ter.

Nota: Esta propriedade afeta apenas as colunas criadas implicitamente, não as definidas explicitamente. Para dimensionar as colunas que você declara antecipadamente, use grid-template-columns. O equivalente para linhas é grid-auto-rows.

Quando são criadas colunas implícitas?

Colunas implícitas aparecem em duas situações comuns:

Um item é posicionado além da última linha de coluna explícita (por exemplo, grid-column-start: 4 quando apenas 3 colunas estão definidas).
O grid usa grid-auto-flow: column, fazendo com que novos itens fluam para colunas recém-criadas em vez de linhas.

Em ambos os casos, as novas colunas herdam sua largura de grid-auto-columns.

Valor Inicial	auto
Aplica-se a	Contêineres de grid.
Herdado	Não.
Animável	Sim. O tamanho das colunas é animável.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	object.style.gridAutoColumns = "100px";

Sintaxe

Sintaxe da propriedade CSS grid-auto-columns

grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);

Exemplo de grid-auto-columns:

Exemplo da propriedade CSS grid-auto-columns com os valores auto e length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

No exemplo a seguir, a propriedade grid-auto-columns é usada para definir um tamanho padrão (largura) para todas as colunas.

Exemplo de grid-auto-columns com todos os valores:

Exemplo da propriedade CSS grid-auto-columns com os valores max-content, min-content, auto e length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-columns: max-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #555;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .white-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .minmax-container {
        display: grid;
        grid-auto-columns: minmax(50px, 1fr);
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #777;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>max-content</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>min-content</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>minmax(50px, 1fr)</h3>
    <div class="minmax-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
auto	O tamanho das colunas é determinado pelo conteúdo ou pelo espaço disponível. Este é o valor padrão da propriedade.
max-content	O tamanho de cada coluna é determinado pela maior contribuição min-content de seus itens.
min-content	O tamanho de cada coluna é determinado pela menor contribuição min-content de seus itens.
minmax(min, max)	O intervalo de tamanho é maior ou igual a "min" e menor ou igual a "max".
length	O tamanho das colunas é especificado por um valor de comprimento.
%	O tamanho das colunas é especificado em porcentagens.

Você também pode passar uma lista de tamanhos separados por espaço (por exemplo, grid-auto-columns: 100px 200px). A lista se repete em ordem para cada nova coluna implícita.

Propriedades relacionadas

grid-auto-rows — a mesma ideia para linhas criadas implicitamente.
grid-auto-flow — controla se itens posicionados automaticamente criam novas linhas ou colunas.
grid-template-columns — define as colunas explícitas.
grid — a propriedade abreviada que agrupa as propriedades de layout de grid.

Prática

O que a propriedade 'grid-auto-columns' no CSS faz?

É usada para especificar o tamanho das colunas de grid criadas implicitamente.É usada para alterar a cor das colunas do gridControla a altura das linhas do gridFunciona em conjunto com 'grid-template-areas' e 'grid-auto-flow' para referenciar colunas do grid.