Guia para CSS Layout Grid Fr Unit

o Módulo de Layout de Grade CSS foi enviado com um nova unidade CSS Chamou o fr unidade. Tão simples quanto possível, fr é o abreviação da palavra “fração”. A nova unidade possibilita dividir rapidamente a grade em colunas ou linhas proporcionais. Como resultado, a criação de grades totalmente responsivas e flexíveis torna-se quase uma brisa.

Como a unidade de fração foi introduzida junto com o módulo Layout da grade, você pode usá-la em qualquer navegador que suporta a grade CSS. Se você também quiser oferecer suporte a navegadores mais antigos, aqui está uma ótima Polifílula de grade CSS que permite usar não apenas o fr unidade, mas outros recursos de grade, bem.

Uso básico

Primeiro, vamos dar uma olhada em um grade básica que usa a unidade de fração. O layout abaixo divide o espaço em três colunas de largura igual e duas linhas de altura igual.

O HTML pertencente é feito de seis divs marcado com o .caixa classe, dentro de um .embrulho div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Para usar o módulo Layout da grade, você precisa adicionar display: grade; Propriedade CSS para o wrapper. o grid-template-columns propriedade usa o fr unidade como valor; a proporção das três colunas é de 1: 1: 1.

Para as linhas da grade (grid-template-rows propriedade), eu não usei o fr unidade, como só faz sentido se o wrapper tem uma altura fixa. Caso contrário, pode ter resultados estranhos em alguns dispositivos, no entanto, mesmo assim, o fr unidade mantém a relação (e isso é enorme).

o lacuna de grade propriedade adiciona uma grade de 10px entre as caixas. Se você não quer nenhuma lacuna, remova essa propriedade.

 .wrapper display: grade; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px; intervalo de grade: 10px;  .box cor: branco; texto-alinhar: centro; tamanho da fonte: 30px; preenchimento: 25px;  

Observe que o CSS acima não contém alguns estilos básicos, como cores de fundo. Você pode encontre o código completo na demonstração no final do artigo.

Taxa de mudança

Claro, você não pode usar apenas 1: 1: 1, mas qualquer relação que você quiser. Abaixo, eu usei 1: 2: 1 frações que também divide o espaço em três colunas mas a coluna do meio será duas vezes mais largo como os outros dois.

Eu também aumentei o valor de lacuna de grade para que você possa ver como isso muda o layout. Basicamente, o navegador deduz o intervalo da grade a partir da largura da janela de visualização (neste exemplo, os intervalos de grade somam 80px) e fatie o resto de acordo com as frações dadas.

 .wrapper display: grade; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 200px 200px; intervalo de grade: 40px;  

Combinar fr com outras unidades CSS

Você pode combinar a fr unidade com quaisquer outras unidades CSS também. Por exemplo, no exemplo abaixo, usei o 60% 1fr 2fr relação para minha grade.

Então, como isso funciona? o o navegador atribui os 60% da largura da janela de visualização para a primeira coluna. Então, divide o resto do espaço em frações de 1: 2.

A mesma coisa também poderia ser escrita como 60% 13,33333% 26,666667%. Mas, francamente, por que alguém iria querer usar esse formato? Uma enorme vantagem da unidade de fração é que melhora a legibilidade do código. Além disso, é completamente preciso, como o formato percentual ainda soma apenas 99,9999%.

 .wrapper display: grade; grid-template-columns: 60% 1fr 2fr; grid-template-rows: 200px 200px; intervalo de grade: 10px;  

Além das porcentagens, você também pode usar outras unidades CSS juntamente com a unidade de fração, por exemplo pt, px, em, e rem.

Adicionar espaço em branco com fr

E se você não quiser que seu design seja confuso e adicione algum espaço em branco para a sua grade? A unidade de fração também tem uma solução fácil para.

Como você pode ver, esta grade tem uma coluna vazia enquanto ainda mantém todas as seis caixas. Para este layout, precisamos dividir o espaço em quatro colunas em vez de três. Então, nós usamos o 1fr 1fr 1fr 1fr valor para o grid-template-columns propriedade.

Adicionamos a coluna vazia dentro do áreas de modelo de grade propriedade, usando o notação de ponto. Basicamente, esta propriedade permite que você áreas de grade nomeadas de referência. E você pode nomear as áreas da grade com o área de grade propriedade que você precisa usar separadamente para cada área.

 .wrapper display: grade; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; intervalo de grade: 10px; grid-template-areas: "caixa-1 caixa-2. caixa-3" "caixa-4 caixa-5. caixa-6";  .box-1 grid-area: box-1;  .box-2 grid-area: box-2;  .box-3 grid-area: box-3;  .box-4 grid-area: box-4;  .box-5 grid-area: box-5;  .box-6 grid-area: box-6;  

As áreas de espaço em branco não necessariamente tem que formar uma coluna, eles pode estar em qualquer lugar na grade.

o repetir() função

Você também pode usar o fr unidade juntos com o repetir() função para sintaxe mais simples. , isso não é necessário se você tiver apenas uma grade simples, mas pode ser útil quando quiser implementar um layout complicado, por exemplo, um grade aninhada.

 .wrapper display: grade; grid-template-columns: repetição (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template-rows: 200px; intervalo de grade: 10px;  

o repita (3, 1fr) sintaxe resulta no mesmo layout Como 1fr 1fr 1fr. O layout abaixo é o mesmo do primeiro exemplo.

Se vocês aumentar o multiplicador dentro de repetir() função você terá mais colunas. Por exemplo, repita (6, 1fr) resulta em seis colunas iguais. Neste caso, todas as nossas caixas estará na mesma fila, o que significa que basta usar apenas um valor (200px) para o grid-template-rows propriedade.

 .wrapper display: grade; grid-template-columns: repetição (6, 1fr); grid-template-rows: 200px; intervalo de grade: 10px;  

Você pode usar repetir() mais de uma vez. Por exemplo, o exemplo a seguir resulta em uma grade na qual as últimas três colunas são duas vezes mais largo como os três primeiros.

 .wrapper display: grade; colunas de molde de grelha: repetir (3, 1 fr) repetir (3, 2 fr); grid-template-rows: 200px; intervalo de grade: 10px;  

Você também pode combinar repetir() com outras unidades CSS. Por exemplo, você poderia usar Repetição 200px (4, 1fr) 200px como um código válido.

Se você está interessado em como criar layouts complexos com o módulo CSS Grid, o repetir() função e o fr unidade Rachel Andrew tem um post interessante sobre como você pode fazer isso.

Uma demonstração para experimentar

Finalmente, Aqui está a demo que prometi. Ele usa o mesmo código do primeiro exemplo deste artigo. Bifurque-o e veja o que você pode conseguir com o fr unidade.