Layout em Grade do CSS: Colunas Fluidas e Espaçamento Melhorado

() translation by (you can also view the original English article)

Nesse tutorial, usaremos a grade do tutorial anterior e o usaremos como base para aprimoramentos. Melhoraremos a definição dos espaçamentos, exploraremos layouts flexíveis, a unidade fr, além da função repeat().

Unidades Flexíveis

A razão em usar grades é permitir-nos controlar layouts na web, então, tornemos fluida nossa grade estática,antes de continuar. Caso lembre, estávamos definindo nossa grade com medidas estáticas, em pixels:

1	grid-template-columns: 150px 20px 150px 20px 150px;
2	grid-template-rows: auto 20px auto 20px auto;

É possível usar outras medidas também, como ems ou rems por exemplo. Ou mesmo unidades como vh e vmin.

Nesse caso, mudaremos de pixels para percentuais. Como definimos a largura de nossas colunas e espaçamentos manualmente, temos de garantir que a soma seja igual a 100%:

1	grid-template-columns: 30% 5% 30% 5% 30%;

Cuidado Com o Vão

Existem formas mais novas e eficientes de declarar medidas dos espaçamentos, e com uma propriedade criada para isso: Podemos usar grid-column-gap e grid-row-gap ou a versão curta, grid-gap.

Usá-los significa que não incluiremos trilhas de grade para acomodar os espaçamentos, apenas precisamos declarar as colunas e linhas, em nosso caso, três de cada:

1	grid-template-columns: 33.33% 33.33% 33.33%;
2	grid-template-rows: auto auto auto;

Hum, isso parece estranho, mas a versão curta é o suficiente: A diferença, agora, é que a largura das colunas somam 100% e nossos espaçamentos serão subtraídos automaticamente delas.

Repeat

Escrevamos melhor, usando a função repeat():

1	grid-template-columns: repeat(3, 33.33%);

Isso significa "repita 33.33% três vez", criando três colunas. E nem precisamos usar grid-template-rows porque o valor auto é atribuído automaticamente. Agora, precisamos definir o tamanho dos espaçamentos:

1	grid-template-columns: repeat(3, 33.33%);
2	grid-gap: 20px;

grid-gap aceita valores fixos ou flexíveis, permitindo combinar colunas fluidas com espaçamentos fixos sem cálculos complexos.

Resetando os Valores de `grid-colum` e `grid-row`

Algo está errado. Há várias declarações grid-column e grid-row nos itens de grade, mas estão todas erradas: já não existem tantas trilhas de grade. Felizmente, por usarmos grid-gap para os espaçamentos, deixaremos o posicionamentos dos itens de forma automática–nunca mais ficarão no lugar errado. Por hora, removamos os posicionamentos:

A Unidade fr

Um último aprimoramento pode ser feito em nossa grade: a unidade fr, fração: Uma unidade fr significa: "um pedaço de quaisquer quantidades que estivermos dividindo". Por exemplo, poderíamos declarar as colunas usando:

1	grid-template-columns: 1fr 1fr 1fr;

Aqui temos um total de três frações, assim, cada coluna terá largura de um terço. Eis outro exemplo:

1	grid-template-columns: 2fr 1fr 1fr

Agora, temos um total de quatro frações, com a primeira pegando metade da largura disponível e as outras duas tomando um quarto, cada.

Essas unidades são poderosas, principalmente quando combinadas com outras unidades:

1	grid-template-columns: 300px 1fr 3fr 20%;

Aqui, declaramos quatro colunas:

a primeira, fixada em 300px de largura
a última, flexível com 20% do elemento container da grade
e, então, as unidades fr são calculadas, deixando a terceira coluna com uma fração do espaço restante
e a terceira coluna com três frações

Ficando assim, perfeitamente alinhada, com nossos nove itens movendo-se para preencher os espaços:

Mas, de volta à nossa grade original. Substituamos os valores 33.33% por 1fr:

1	grid-template-columns: repeat(3, 1fr);

Pen finalizada:

Conclusão

Para recaptular:

Grades aceitam unidades flexíveis combinadas com unidades estáticas.
Não é preciso declarar espaçamentos no grid-template, podemos usar a propriedade grid-gap.
grid-gap dissocia o posicionamento dos itens da grade–a responsibilidade ficará com o posicionamento automático.
A função repeat() poupará tempo e deixará nossas folhas de estilo manuteníveis.
A unidade fr, fração, é uma poderosa forma de descrever nossos modelos de grade.

Vimos muito em apenas dois tutoriais, mas somos donos de uma grade bem concisa e poderosa! No próximo tutorial, exploraremos áreas de grade, analisando a palavra chave span e alguns layouts práticos.

Recursos Úteis

O tipo <fraction> e a unidade fr no W3C
Novamente, siga @rachelandrew