Grade-modelo-colunas / grade-modelo-linhas - CSS-Tricks

As propriedades grid-template-rowse grid-template-columnssão as propriedades CSS primárias para estabelecer um layout de grade, uma vez que o elemento é um contexto de grade ( display: grid;).

Existem também -ms-grid-columnse -ms-grid-rows, que são a versão antiga do IE. Você pode querer considerar a correção automática para obtê-los, ou não, sua chamada. Houve também um período estranho onde eles estavam grid-definition-columnse grid-definition-rows, mas isso não é mais uma coisa.

Aqui está um exemplo derivado da documentação da Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Isso define o número de linhas / colunas na grade, bem como sua dimensão.

Essas duas propriedades oferecem suporte a uma lista de valores separados por espaços. Cada valor definirá uma nova coluna / linha definindo uma dimensão. Uma lista de 4 valores resultará em 4 colunas / linhas. Um único valor produzirá uma única coluna / linha.

Valores aceites incluem o comprimento (como pxou em), percentagens, fracções ( fr; ver abaixo), auto(ou fit-content), min-content, max-content, e minmax(), ou a repeat()função.

No exemplo de código acima, isso significa:

Coluna 1 ( palavra - chave automática ): a coluna é ajustada ao conteúdo da coluna.
Coluna 2 (“100px”): a coluna tem 100 pixels de largura.
Coluna 3 (“1fr”): A coluna ocupa uma unidade de fração do espaço restante.
Coluna 4 (“2fr”): A coluna ocupa duas unidades de fração do espaço restante.

Linha 1 (“50px”): a linha tem 50 pixels de altura.
Linha 2 (“5em”): a linha tem 5 ems de altura.
Linha 3 ( palavra - chave de conteúdo mínimo ): A linha é tão pequena quanto o conteúdo permite.
Linha 4 ( palavra - chave automática ): a linha é ajustada ao conteúdo da linha.

repita()

A repeat()função foi projetada especificamente para este módulo. Ele permite que você defina um padrão repetido X vezes. Gosto repeat(6, 1fr);. Digamos que você queira fazer 12 colunas de largura igual espaçadas umas das outras por uma margem de 1%; você poderia definir 1fr repeat(11, 1% 1fr). É o mesmo que 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

A unidade fr

A frunidade pode ser usada para valores grid-rowse grid-columns. Significa “fração de espaço disponível”. Pense nisso como porcentagens de espaço disponível quando você removeu colunas / linhas de tamanho fixo e baseadas em conteúdo. Como diz a especificação:

A distribuição do espaço fracionário ocorre depois que todos os tamanhos de linhas e colunas de 'comprimento' ou baseados em conteúdo atingem seu máximo.

Relacionado

Nosso melhor recurso para todas as coisas sobre grade CSS é nosso Guia completo para grade CSS.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.