Propriedade CSS grid-template-columns

A propriedade grid-template-columns define o número de colunas em um layout de CSS Grid e a largura (tamanho da faixa) de cada uma. Ela é aplicada ao contêiner grid — o elemento com display: grid — e cada valor na lista cria uma faixa de coluna explícita.

Esta página aborda as palavras-chave e funções de dimensionamento de faixas que podem ser passadas a ela (fr, repeat(), minmax(), auto, fit-content()), quando usar cada uma e as armadilhas comuns. Para o equivalente de linhas, consulte grid-template-rows; para definir colunas e linhas juntas, consulte grid-template.

Valor inicial	none
Aplica-se a	Contêineres grid.
Herdado	Não.
Animável	Sim. As colunas são animáveis.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	object.style.gridTemplateColumns = "40px 40px 40px";

Sintaxe

CSS grid-template-columns

grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;

Exemplo da propriedade grid-template-columns:

Exemplo de código CSS grid-template-columns

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 20px;
      }
      .example > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Aqui, 1fr 1fr 1fr 1fr cria quatro colunas de largura igual. A unidade fr ("fração") divide o espaço restante no contêiner após a subtração dos espaçamentos, de modo que as quatro faixas permanecem sempre iguais independentemente da largura da tela. Os oito itens se distribuem em duas linhas implícitas porque há apenas quatro colunas.

Resultado

Exemplo de grid-template-columns aplicado ao grid-container:

Exemplo de comprimento CSS grid-template-columns

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Misturar faixas fixas e flexíveis é o padrão mais comum no mundo real. No exemplo acima, a primeira coluna tem exatamente 40px, a segunda 150px, a quarta 80px, e a terceira (auto) absorve o espaço restante.

Palavras-chave e funções de dimensionamento de faixas

Raramente se lista cada coluna manualmente. Estas palavras-chave e funções mantêm o valor conciso e responsivo.

repeat() — evite repetição

repeat(count, size) expande para count faixas do tamanho especificado. grid-template-columns: repeat(4, 1fr) é idêntico a 1fr 1fr 1fr 1fr. Combinado com auto-fill/auto-fit, cabe o máximo de faixas que o contêiner permite — a base de grids de cards responsivos:

/* As many 200px+ columns as fit; each grows to fill the row. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

minmax() — defina um mínimo e um máximo

minmax(min, max) permite que uma faixa cresça e encolha entre dois limites. minmax(200px, 1fr) nunca fica mais estreita que 200px, mas se expande para compartilhar o espaço disponível. Use-a para evitar que colunas colapsem em telas pequenas.

fr — compartilhe o espaço restante

A unidade fr distribui o espaço que sobra após tamanhos fixos e espaçamentos. 2fr 1fr faz a primeira coluna ser duas vezes mais larga que a segunda. Ao contrário de porcentagens, fr já considera o espaçamento, então as colunas não ultrapassam os limites do contêiner.

auto, max-content, min-content, fit-content()

auto dimensiona uma faixa pelo seu conteúdo, mas permite que ela se expanda; max-content a torna tão larga quanto seu conteúdo mais extenso sem quebra; min-content a encolhe ao mínimo que o conteúdo permite; fit-content(300px) se comporta como auto, mas nunca ultrapassa o limite especificado.

Experimente junto

<!DOCTYPE html>
<html>
  <head>
    <title>grid-template-columns with repeat and minmax</title>
    <style>
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .cards > div {
        background-color: #6b9b37;
        color: #fff;
        text-align: center;
        padding: 30px 0;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>Responsive columns</h2>
    <div class="cards">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Redimensione a pré-visualização: o número de colunas muda automaticamente enquanto cada card mantém pelo menos 120px de largura.

Valores

Valor	Descrição	Experimente
none	Este é o valor padrão da propriedade.	Experimente »
auto	O tamanho da faixa é determinado pelo seu conteúdo, mas pode crescer para preencher o espaço disponível.	Experimente »
max-content	O tamanho de cada coluna depende do item maior na coluna.	Experimente »
min-content	O tamanho de cada coluna depende do item menor na coluna.	Experimente »
minmax(min, max)	O intervalo de tamanho é maior ou igual a "min" e menor ou igual a "max".	Experimente »
`<length>`	O tamanho das colunas é especificado por um valor de comprimento.	Experimente »
`<percentage>`	O tamanho das colunas é especificado em porcentagens.	Experimente »
`<flex>`	Uma dimensão não negativa com a unidade "fr" que especifica o fator flex da faixa. Cada faixa dimensionada com `<flex>` compartilha o espaço restante proporcionalmente ao seu fator flex.	Experimente »
fit-content	Representa min(max-content, max(auto, argument)), semelhante a auto (ou seja, minmax(auto, max-content)), mas o tamanho é maior que o mínimo automático.	Experimente »
repeat	Representa um fragmento repetido da lista de faixas, permitindo que um grande número de colunas com um padrão recorrente seja escrito de forma mais compacta.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.	Experimente »

Propriedades relacionadas

grid-template-rows — a mesma ideia para faixas horizontais (linhas).
grid-template-areas — nomeia regiões do grid e posiciona itens pelo nome.
grid-template — abreviação que define linhas, colunas e áreas de uma só vez.
grid-auto-columns — dimensiona colunas implícitas criadas além do seu template explícito.
grid — a abreviação completa para toda a definição do grid.

Prática

Qual é a função da propriedade 'grid-template-columns' no CSS?

Ela define o número de linhas em um layout grid.É usada para especificar os nomes de linha e as funções de dimensionamento das colunas do grid.Ela ajuda no alinhamento do texto dentro do layout grid.Define a largura e o número de colunas em um layout grid.É usada para estilizar a cor de fundo do grid.