Как сделать адаптивную сетку на гридах?

Question

[Иван]

У меня есть сетка, где есть основной контент и сайд бар, я разметил их на гридах в контейнере, при уменьшении экрана до 1020px сайдбар я скрываю, как мне сделать адаптивным основной контент? там сетка идёт тоже, я хочу чтобы левый блок, который 760px как можно дольше уменьшался, чтобы правый блок, который 240px не пропадал и не съезжал вниз.

Условно до 700px я хочу, чтобы сетка просто была резиновая, после - адаптивная.
Пытался что-то покрутить через repeat(auto-fit, minimax(...)), но видимо это тут никак не сработает.

https://codepen.io/sotni-lichnostej/pen/oNXxmeg?ed...

PS почему-то ссылка на codepen не показывается.

макет - prnt.sc/r3l13h

ps ps добавил макет.

Comments

[Иван]

VicTHOR, в макете без гридов никак, можно конечно через медиа-запросы в ручную высчитывать все разрешения, но чёт гемор же

[Иван]

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

[Иван]

VicTHOR, не-не-не, мне вертикальная не столько важна ведь. В основном контенте есть секции, мне нужно именно секции контролировать, т.е горизонтальная сетка идёт

[Ankhena]

У вас в верстке все размеры гридов (да еще и по высоте) в px, о какой адаптивности может идти речь?
https://habr.com/ru/company/edison/blog/344878/
и это еще https://medium.com/@stasonmars/%D0%BA%D0%B0%D0%BA-...

[Иван]

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

[Иван]

Ankhena, вся проблема в том, что я не могу подогнать под нужные пиксель при помощи фракций или процентов

[Ankhena]

Иван,

чтобы было понимание

Это для этого всё в одинаковый красный цвет покрашено? ))))))) Оки )))
Фиксированная высота не приводит к пиксельперфект.

[Иван]

Ankhena, дыа

Это для этого всё в одинаковый красный цвет покрашено?

, фиксированная высота стоит по скольку контейнеры пустые, нужно было насильно задавать высоту

[Ankhena]

Иван,

вся проблема в том, что я не могу подогнать под нужные пиксель при помощи фракций или процентов

Это почему это еще?
Вы не можете в макете посмотреть пиксели и перевести их в %? Или поставить ограничители minmax?

[Иван]

Ankhena, увлекательная математика с Иваном: у нас есть контейнер общей шириной 1020px, из них 20px будут отступы, нам надо получить сколько процентов займет контейнер который длиной 760px. Считаем: 760/ (1020 / 100) = 74.50980309 и как мне это вписать в css?

[Иван]

Ankhena, Так. Вроде подобрал фракцию в 9.5, для второго контейнера указал статичные 240px, но теперь ESLint орёт, что я не округляю до 10 или до 9. Запушить явно не даст.

[Devi2005]

Иван,
.innerContainer{width: calc( 100% - 260px );}
Вот только это извращение еще то. При любых изменениях придется гемориться вспоминать что еще было затронуто. Доведите гриды до ума, будет легче.

[Ankhena]

Иван, пора показывать макет.
Я вообще подозреваю, что гриды там лишние.

[Devi2005]

Иван,
И уберите в примере бэкграунд у layout, так же пропишите section{background: red;}
А то совсем не понятно где какой блок.
Первоначальная проблема решается добавлением .preview,.container {grid-template-columns: auto;} в media (изменив max-width до 700).

[Иван]

Devi2005, там уже при 1200px блоки наезжают друг на друга, а ведь это мы еще даже до скрытия сайдбара при 1020px не дошли

[Иван]

Ankhena, Добавил ссылку, тостер ругается вообще с ума сходит, приходится как обычный текст ссылку прописывать. Картинкой, разумеется, не даёт загрузить

[Devi2005]

Иван, надо еще в preview прописать grid-template-columns: auto 240px;

[Иван]

Devi2005, ладно, опробую уже это всё завтра тогда и отпишу что-как получилось

[Devi2005]

.container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 240px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 1280px;
    margin: 50px auto 0;
    padding: 0 20px 
}

.sidebar {
    background: red;
    display: grid;
    grid-row-gap: 20px;
    grid-template-rows: 400px 735px 166px 400px 346px 400px;
    grid-template-columns: 240px;
}

.layout {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 400px 740px 1240px 700px 490px 490px 490px 250px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
section {background: red}
.preview {
    display: grid;
    grid-template-columns: auto 240px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    background: red;
}

.test-block, .test-block-2 {
  height: 100%;
}

@media only screen and (max-width: 700px) {
  .preview,.container {grid-template-columns: auto;}
}

Вот этот css должен работать. Но там много чего лишнего прописано, я бы на вашем месте еще немного посмотрел информацию про гриды. Когда сам разбирался пользовался этой страничкой.

[Ankhena]

Иван, прекрасный макет.
Либо флексом в 2 колонки. Либо гридом в те же самые 2 колонки (только зачем). Откуда 9.5? )))
У одной колонки фикс ширина 240 или сколько там и flaex-shrink 0, у второй flex-grow 1.
Всё.

[Иван]

Devi2005, Спасибо, мне ваш ответ подошёл. Почитаю дополнительно про гриды, спасибо за ссылку.

Answer 1

[Никита Шинкевич]

С банальным bootstrap знакомы?

Comments

[Иван]

Никита Шинкевич фу-фу-фу, не произносите такие плохие слова в 2020 году

[Andrew]

Иван, работодателю это скажете, где будет 40 больших проектов на бстрапонах, расскажете как вас наймут.

[Иван]

Andrew, Ни одного проекта у нас на этой херне нету, нормальные конторы таким не промышляют, максимум админку для внутреннего форума

[html-css]

так регулируйте медиа запросами, в чем проблема

[Иван]

html-css, слишком много их получится, есть большая вероятность где-нибудь промахнуться

[Andrew]

Иван, че за контора?))

[Никита Шинкевич]

Иван, для меня как работодателя и разработчика важны: дешевизна, скорость разработки и результат. и мне плевать на чем оно сделано будет. Мы не знаем как решить задачу которую решит любой школоло, но мы пафосные до степени "фу-фу-фу"... Чего умеем то вообще в таком случае?

[Иван]

Никита Шинкевич, странный вы работодатель, который пытается совместить три несовместимые вещи, яб к такому не пошёл

дешевизна, скорость разработки и результат.

. Раз критикуете - решите задачу, трещать все умеют

[Никита Шинкевич]

Иван, еще раз: думать - это больно, но придется. Качаем бутстрап, открываем стили и смотрим глазками как это реализовано. На слабо не получится друг мой.

[Иван]

Никита Шинкевич, подите прочь, если вы застряли в прошлом, не надо остальных туда же тянуть. Идите на jQuery пишите)

[Никита Шинкевич]

Иван, вот объясните мне тупому, например у меня лежат 50 велосипедов на складе к началу сезона, мне нужно чтобы к вечеру у меня было 3 варианта лендинга под это барахло, потому что моя задача быстро выбросить их на рынок и дать прогон рекламы. Я ставлю задачу и говрю: родной, вот бюджет, надо сделать быстро, чтобы на четвертом айфоне и на десктопе клиентос понял и увидел что я ему продаю и мог выйти на связь. И тут мне начинает вот это вот чудо с чупачупсом, которое начиталось справочников, посмотрело пару курсов на ютубе, лечить меня на тему того, что "Дяденька, вы не понимаете, это вот то что дешево - это неправильна, это прошлый век, сейчас уже 2020 год, а так как вы хотите верстали в 2019 году, не не не, это не модна, не красива, нельзя так." Я спрашиваю, а каким перепоем это скажется на результате? Да хоть тейблами сверстай, мне фиолетово как. Базис решений не в том, чтобы выпячивать новинки, а пользовать проверенные временем и вполне рабочие решения. Все. Больше ничего не нужно. Поэтому в свое время я сел за комп и за пару недель освоил нелюбимый вами бутстрап, зато теперь я трачу на это минимум времени, ноль денег. И тем более вертел я на оси, коей является мой детородный орган, любителей холиваров, которые свои мульки пытаются монетизировать под 100к за лендинг.

[freekir]

Никита Шинкевич, Не хочу ни кого обидеть, но если бы вы показали 3 лендинга за вечер, которые на выходе получается, все бы посмотрели, поняли, что вы правы и извинились. Что за результат, которым вы так гордитесь? Я тоже так хочу за вечер и чтобы все счастливы были.

Вообще если надо по быстрому и вам все равно, Тильда вообще норм и верстак не нужен.

Answer 2

[Devi2005]

Добавьте .preview,.container {grid-template-columns: auto;} в media. Если правильно понял задачу, то должно заработать.