Advertisement
  1. Web Design
  2. CSS Grid Layout

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

by
Read Time:3 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

Portuguese (Português) translation by Erick Patrick (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:

É 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%:

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:

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():

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:

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:

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

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:

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:

Pen finalizada:

Conclusão

Para recaptular:

  1. Grades aceitam unidades flexíveis combinadas com unidades estáticas.
  2. Não é preciso declarar espaçamentos no grid-template, podemos usar a propriedade grid-gap.
  3. grid-gap dissocia o posicionamento dos itens da grade–a responsibilidade ficará com o posicionamento automático.
  4. A função repeat() poupará tempo e deixará nossas folhas de estilo manuteníveis.
  5. 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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.