Introdução à unidade fr

Ao criar layouts que se adaptam suavemente a qualquer tamanho de tela, a unidade fr é uma ferramenta poderosa à sua disposição. A unidade fr (fração) no CSS Grid permite alocar uma parte do espaço disponível para as faixas da grade. Diferente de unidades fixas como px ou %, a unidade fr distribui o espaço de forma dinâmica, garantindo que sua grade permaneça flexível e responsiva.

Se você definir suas colunas da grade como 1fr 2fr, a primeira coluna recebe uma parte do espaço disponível e a segunda coluna recebe duas partes, independentemente da largura total da grade. Isso torna a unidade fr essencial para criar layouts que se ajustam elegantemente sem ajustes manuais.

Como funciona o minmax() e quando utilizá-lo

A função minmax() permite definir um intervalo de tamanho para uma faixa da grade, especificando tanto um valor mínimo quanto um máximo. Essa abordagem é fundamental para o design responsivo, pois impede que as faixas da grade fiquem pequenas demais para leitura ou largas demais para manter um layout equilibrado.

• Utilize minmax(min, max) para definir limites inferior e superior de tamanho para colunas ou linhas;
• Garanta a legibilidade do conteúdo definindo um valor mínimo adequado;
• Permita que as faixas expandam e preencham o espaço disponível combinando minmax() com unidades fr;
• Mantenha layouts flexíveis e amigáveis ao usuário em todos os tamanhos de tela.

Por exemplo, minmax(150px, 1fr) garante que uma coluna nunca fique menor que 150px, mas pode crescer conforme o espaço disponível. Aplique minmax() quando desejar que imagens, cartões ou blocos de conteúdo permaneçam legíveis e visualmente equilibrados, aproveitando ao mesmo tempo a distribuição dinâmica do espaço.