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
seletor {
grid-template-columns: largura da coluna;
}
Exemplo
Vamos definir a largura das colunas para nossos elementos no grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<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>
#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:
<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>
#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:
<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>
#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
-
a propriedade
grid-template-rows,
que define o número e a altura das linhas no grid -
a propriedade
grid-auto-columns,
que define o número e a largura das colunas no grid implícito
