Pular para o conteúdo
Câmara de Medidas do CSS

/static/camara/unidade/fr/

Menu

CSS-021 · Grade e fração

fr

A fração do espaço que sobrar — a unidade que só existe no grid.

Um fr é uma fração do espaço livre da grade: servido tudo o que tem tamanho rígido, o que sobra é repartido na proporção dos fr declarados. Não é um comprimento — é o tipo <flex>, e por isso não entra em calc() nem em qualquer propriedade fora dos gabaritos de grid.

É a escolha certa sempre que a pergunta é “em que proporção dividimos o resto?”: 1fr 2fr 1fr é uma coluna central com o dobro das laterais, sem porcentagem nem aritmética de gutter. Detalhe de balança: 1fr equivale a minmax(auto, 1fr) — o conteúdo largo ainda pode esticar a coluna.

1fr
2fr
1fr
.galeria {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
Demonstração viva: o espaço livre repartido em quatro quinhões — um, dois, um.