Как сделать разную ширину колонок в grid?

Question

[Andrew Morozov]

Как правильно сделать разную ширину колонок при помощи grid?
Я мог бы задать размеры колонкам, вместо
grid-template-columns: repeat(3, 1fr);
Сделать
grid-template-columns: 262px 188px 108px;
Но такой вариант не подходит, выходит за размеры контейнера, если статически задать размеры...

Comments

[Вадим]

Проблема не ясна.
Вы знаете как можно задать разный размер колонок.
За какие размеры контейнера выходит, при каких обстоятельствах, что мешает выбрать правильные размеры, что мешает использовать медиазапросы если это в адаптиве?

[Andrew Morozov]

Вадим, Нужно что бы выглядело как на скрину, даже при уменьшении контейнера, потому что если я сделаю grid-template-columns: 262px 188px 108px; тогда в контейнере будет скролл, из-за статических размеров колонок....

А нужно что бы просто выглядело как на скрине, без привязки к значениям в пикселях по типу
grid-template-columns: 262px 188px 108px; наверное...)

[Andrew Morozov]

Вадим, Вот что происходит если вот так задам значение grid-template-columns: 262px 188px 108px;
Контейнер стаёт меньше, и эти input выходят за пределы, делая скролл, не сжимаются...

[Вадим]

mark1505, можно воспользоваться функцией min max, а так же значением max content.
Но на определённой ширине экрана адаптив всё равно придётся сделать.

[Ankhena]

mark1505, вы можете задавать их в пропорциях типа 0.5fr 1fr 6fr
Или комбинацией с min-content (или max-content), min-content 1fr min-content (две крайние по контенту, остальное центральной)
Можете пользоваться функцией minmax.
Почитайте варианты https://developer.mozilla.org/ru/docs/Web/CSS/grid...

[Andrew Morozov]

Вадим, как-то так?

grid-template-columns: minmax(262px, max-content) minmax(188px, max-content) minmax(108px, max-content);

Если так, то что-то не работает как нужно, всё равно просто заезжает под контейнер

Мне особо адаптив не нужен будет, нужно просто что бы оно нормально выглядело на разных экранах компьютера

[Вадим]

mark1505,

Мне особо адаптив не нужен будет,

нужно что бы оно нормально выглядело на разных экранах компьютера

Это предложение не противоречит самому себе только при условии, что "разные экраны" - имеют достаточно маленький разброс по разрешению. Тогда можно обойтись резиновым дизайном, да.

Быстрее всего Ваш вопрос можно решить если Вы сделаете демку на codepen, где будет наглядно продемонстрирована проблема.

[Andrew Morozov]

Ankhena, Спасибо, это сработало
grid-template-columns: 1.3fr 0.93fr 0.5fr;