Как сделать элементы резиновыми с использованием CSS Grid?

Question

[mardari98]

Например, у меня есть страница фиксированной ширины 1024px, внутри неё 2 элемента, один фиксированной ширины 200px, a другой минимум 200, максимум вся ширина. Если использовать всю страницу, элементы получаются "резиновыми", то есть адаптируются под ширину экрана, а если задать фиксированную ширину, то получается шляпа.

Пишу так: grid-template-columns: 200px minmax(200px,1fr);.



Вот как-то так должно быть, а когда экран уменьшается, фиксированный элемент остаётся таким, а резиновый уменьшается до указанного минимума. Пробовал по-разному делать, появляется всегда полоса горизонтальной прокрутки.

Comments

[Владимир Скибин]

Покажите код на codepen

[mardari98]

Владимир Скибин, вот
Если убрать стили для page, то работает как надо

Answer 1

[ReActor Дмитрий Вершанский]

Для достижения поведения responsive (резиновости) вашей верстки, достаточно соблюдать одно главное условие - Никаких фиксированных значений width! Иными словами исключайте единицы измерения "px" и напротив дружите с относительными величинами, такими как: %, vw, vh, em, rem, а также в вашем случае фракции fr в рамках Grid css layout

Comments

[mardari98]

ок, понял. Но если в макете, например, основная страница имеет ширину 1024px, тогда как быть? посчитать в макете сколько это будет в процентах?