Propriedade grid-template-columns

A propriedade grid-template-columns define o número e a largura das colunas que um elemento ocupará no grid ou layout de grade. A propriedade é especificada no elemento pai e define a largura das colunas dos elementos filhos. No valor da propriedade, especificamos a largura das colunas em qualquer unidade de tamanho.

Ao especificar valores em pixels nas propriedades, os tamanhos das colunas corresponderão exatamente a eles. Se usarmos a palavra auto, as colunas irão preencher todo o espaço disponível. O uso da unidade fr (fração) significa que todo o espaço será dividido em partes iguais. A vantagem da fr é sua adaptabilidade a diferentes contêineres ou resoluções de tela, pois a fr simplesmente divide o espaço no número indicado de frações sem vinculação a um tamanho exato em pixels.

Sintaxe

cssseletor {
  grid-template-columns: largura da coluna;
}

Exemplo

Vamos definir a largura das colunas para nossos elementos no grid:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Vamos definir para a primeira e terceira colunas uma largura fixa em pixels, e a segunda coluna que preencha automaticamente o espaço disponível:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px auto 150px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora, usando a propriedade grid-template-columns, vamos fazer com que a primeira e a segunda colunas ocupem uma parte do contêiner, e a terceira coluna - três partes:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Os valores especificados em unidades fr podem ser fracionários. Vamos modificar o exemplo anterior, especificando para a segunda e terceira colunas uma largura em números fracionários:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Vamos usar na propriedade grid-template-columns a função repeat(), que informará ao contêiner que todas as três colunas devem ter a mesma largura:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora vamos modificar o exemplo anterior para que às três colunas iguais seja adicionada uma quarta, que ocupará duas frações do contêiner:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Vamos definir para as duas primeiras colunas uma largura de uma fração do contêiner, e para as duas últimas colunas - duas frações:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora vamos definir a largura das colunas combinando valores especificados com a função repeat() e unidades livres fr:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Também na função repeat() pode-se especificar o valor auto-fill, que preencherá nosso contêiner com colunas idênticas da largura desejada:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

É muito conveniente usar auto-fill junto com a função minmax, que define uma faixa de largura para as colunas do valor mínimo ao máximo. Se a largura do contêiner não couber todas as colunas, algumas delas se moverão para uma nova linha, enquanto as colunas na linha serão distribuídas uniformemente nela. Vamos modificar o exemplo anterior, especificando nele a função minmax. Para ver diferentes variações de posicionamento das colunas, altere a largura da janela do seu navegador:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora vamos especificar a propriedade auto-fit, cuja diferença para auto-fill está no fato de que ela ajusta o número de colunas à largura disponível do contêiner, expandindo ou comprimindo-as:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Também, juntamente com fr, podem ser usados valores em %, que também definem que parte do contêiner a coluna ocupará. Neste caso, primeiro será calculado o tamanho da coluna em %, e o espaço livre restante será dividido em frações:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Vamos usar juntas as propriedades grid-template-columns e grid-template-rows:

html<div id="parent">
  <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>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Vamos usar as propriedades grid-template-columns e grid-template-rows criar uma tabela de nove células, dispostas em três linhas. Sendo que a segunda e a terceira linhas terão a mesma altura, e cada coluna - uma largura diferente:

html<div id="parent">
  <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>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora, na tabela do exemplo anterior, vamos fazer a linha superior com uma altura de duas frações, e a primeira coluna - com meia fração:

html<div id="parent">
  <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>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Veja também