Padding de seção (24px → 96px)
- Entrada
- min: 24px @ 320px viewport, max: 96px @ 1440px viewport
- Saída esperada
- --space-section: clamp(1.5rem, 5.45vw + 0.27rem, 6rem);
Token para padding vertical de seções. Escala proporcionalmente.
espaçamento fluido CSS clamp padding gap
Espaçamento fluido com CSS clamp(): padding e gap que escalam com a tela
Espaçamento fluido com `clamp()` aplica a mesma lógica da tipografia fluida para propriedades de layout: padding, margin, gap, row-gap, column-gap. O resultado é um layout que respira proporcionalmente em qualquer tamanho de tela — de 320px a 2560px — sem uma única media query.
Por que espaçamento fluido melhora a experiência
- Quando padding de seção é fixo (ex: 64px), em mobile fica proporcionalmente enorme e em telas ultra-wide parece insignificante. Com clamp, o padding escala entre, por exemplo, 24px em 320px viewport e 96px em 1440px. O ritmo visual da página se mantém coerente em toda a gama de dispositivos.
- Para tokens de design system, defina variáveis fluidas no `:root`: `--space-section: clamp(24px, 4vw + 10px, 96px)`. Componentes usam `padding: var(--space-section)` e o sistema escala automaticamente sem nenhuma media query em componentes individuais.
Tokens de espaçamento fluido prontos
Gap de grid de cards (12px → 28px)
- Entrada
- min: 12px @ 375px, max: 28px @ 1280px
- Saída esperada
- --gap-cards: clamp(0.75rem, 1.74vw + 0.09rem, 1.75rem);
Gap responsivo para grids. Evita compressão visual em telas pequenas.
FAQ da ferramenta completa
É uma função CSS que limita um valor entre mínimo e máximo. No meio, aceita qualquer expressão CSS — normalmente `viewport-width + constante-rem` para tipografia fluida.
Perguntas frequentes
Clamp aceita unidades mistas (px e rem)?
Não diretamente no mesmo parâmetro. Mas o browser converte automaticamente antes de avaliar. `clamp(1rem, 2vw + 0.5rem, 3rem)` funciona perfeitamente — o browser usa px internamente para comparação.
Posso usar clamp com dvh/dvw para espaçamentos full-screen?
Sim. Viewports dinâmicas (dvh, dvw) funcionam dentro do clamp. São especialmente úteis para alturas de seção hero que devem variar entre dispositivos e estados de browser.