Propriedade grid-template

A propriedade grid-template define o número e a largura das linhas e colunas que um elemento ocupará no grid ou grade e é uma forma abreviada das propriedades grid-template-rows e grid-template-columns. As linhas e colunas onde o elemento será posicionado são indicadas por uma barra. A propriedade grid-template é definida no elemento pai e determina a disposição dos elementos filhos. No valor da propriedade, especificamos a largura das linhas ou colunas em qualquer unidade de medida para tamanhos.

Ao especificar valores em pixels nas propriedades, os tamanhos dos elementos corresponderão exatamente a eles. Se usarmos a palavra auto, as colunas e linhas preencherão 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 de frações especificado sem vinculação a um tamanho exato em pixels.

Sintaxe

cssseletor {
  grid-template: largura e número de linhas / largura e número de colunas;
}

Exemplo

Vamos usar a propriedade grid-template para criar uma tabela:

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: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora vamos definir a segunda e a terceira linhas com a mesma largura, e cada coluna com 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: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Exemplo

Agora, na tabela do exemplo anterior, vamos fazer a linha superior ter uma largura de duas frações, e a primeira coluna - 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: 2fr 1fr 1fr / 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