Crie sistemas de espaçamento adaptáveis que escalam de forma fluida entre celulares estreitos e monitores desktop ultrawide.
Insira os limites de espaçamento
Insira seu padding mínimo para dispositivos móveis e o padding máximo para desktop em pixels.
Defina os limites de tela
Defina as larguras de tela inicial e final para o aumento do espaçamento.
Aplicar às regras de espaçamento
Copie o valor calculado e cole nas suas propriedades `padding`, `margin` ou `gap`.
Substitua blocos repetitivos de `@media` queries em seus tokens de design por uma única regra declarativa clamp().
Garante que o padding das suas seções nunca fique abaixo dos padrões mínimos de usabilidade nem ultrapasse os limites do layout.
Sim, o clamp() funciona perfeitamente para as propriedades gap, margin, padding e width.
A propriedade fica travada com firmeza no valor máximo definido e não aumentará mais.