Как задать размер gap с помощью calc(), чтобы он увеличивался вместе с размером экрана?

Question

[Александр Ковалёв]

Здравствуйте!
Как задать размер gap с помощью calc(), чтобы он увеличивался вместе с размером экрана?

Answer 1

[Ankhena]

Прям так и задать
gap: calc(5% + 10px);
gap: calc(5vw - 10px);

Единицы измерения зависящие от размеров вьюпорта: vw, vh, vmin, vmax

Также вам может помочь функция clamp (или min или max).

Например, если нужно задать 5vw, но не меньше, чем 10px и не больше, чем 50px
gap: clamp(10px, 5vw, 50px);

Тогда не нужен calc.

Comments

[San Manjiro]

а если значение граничащее возле max? из примера выше понятно что есть минимальное и максимальное, ap: clamp(10px, 5vw, 50px);, но как сделать так, чтобы блок изначально имел значение приближенное к 50px, а дальше просто уменьшался. У меня есть код

grid-template-columns: 355px clamp(290px, 22vw, 435px);

и нужно чтобы по дефолту размер второго столбца был 435px, а дальше только уменьнался до 290px, как подобрать середину?

[Ankhena]

San Manjiro, что значит "изначально"?
При такой записи размер зависит от размера вьюпорта, но не превышает максимальное значение и не может быть меньше минимальной.
Соответственно и изначальный размер будет зависеть от размера вьюпорта посетителя.

как подобрать середину?

vw это сотые доли вьюпорта.
Значит, поделить 435 на то значение вьюпорта на котором нужно достичь этого размера и умножить на 100. Пусть это будет 1440px.
435/1440*100 = 30.20833333
Итого 30.21vw

Answer 2

[Froggyweb]

в простом случае gap: 5vw в более сложном https://www.youtube.com/watch?v=NVdlfhkDAGM