Как сделать сетку из двух блоков в ряду с одинаковой высотой, без FLEXBOX?

Question

[Cheizer]

Подскажите пожалуйста, как сделать адаптивную сетку из двух блоков в ряду (рядов может быть много), без FLEXBOX (пример на FLEXBOX), и без JS, и главное, что бы блоки были одинаковой высоты, по контенту самого большого в ряду.
Как это сделать?

Пример на FLEXBOX.

Comments

[Анатолий]

CSS Grid?

[Cheizer]

Анатолий, можно пример, ссылку?

[Dima Polos]

Почему без flexbox, какая причина, если не секрет?

Answer 1

[Артур Белан]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
Я бы советовал прочитать термин grid и сразу же переходить к коду, там вы сразу всё поймёте, будут вопросы задавайте, помогу))

Comments

[Dima Polos]

Вы когда совет даете учитывайте, что человек может и не в курсе быть про подводные камни :)

[Артур Белан]

Dima Polos, Понял, в следующий раз буду говорить о таких нюансах. Но я думаю каждый кто начинает делать проект или заказ, сталкивался с этой проблемой и понимает что у всех браузеров один общий стандарт (по технологиям) но не у всех. И как показывает статистика, Chrome и yandex самые популярные.
alexvaleev.ru/browserstat
Зачем адаптировать сайт под Explorer, у которого меньше 2%, если у нас сайт или приложение ориентируется под игровою индустрию. Это уже нужно ориентироваться под какие нужды нужно наше приложение, согласны?

[Dima Polos]

Артур Белан, согласен, зависит от ТЗ и конкретно от требований, просто советую в ответе предупреждать) Тут вопросы я лично видел, как писать php код в jquery, так что люди иногда с такой кашей приходят, я бы не ориентировался на то, что человек все и сам поймет и уточнит, лучше предупредить)

[Артур Белан]

Dima Polos, Ок))

Answer 2

[Eduard07]

Держи)) https://codepen.io/ed_s/pen/jOWzwrq

Comments

[Cheizer]

Спасибо, подскажите пожалуйста, а как сделать по два блока в ряду? https://codepen.io/Cheizer/pen/BajrZWy

[Eduard07]

Роман Кузнецов, не знаю можно ли сделать с этим примером так ((

[Артур Белан]

Роман Кузнецов,
Это можно записать в две строки

.wrapper {
display: grid;
  grid-template-columns: auto auto;
}

.col-1 {
 
  background-color: red;
}

.col-2 {
  background-color: blue;
}

[Cheizer]

Артур Белан, БЛАГРОДАРЮ!

[Dima Polos]

Роман Кузнецов, Роман, Вас не предупредили, но Grid имеет еще меньше поддержку браузеров, чем flexbox, имейте ввиду это

[Cheizer]

Dima Polos, Да знаю, спасибо, мне он только для Print стилей, а для браузера FLEX конечно. Просто FLEX криво на FIREFOX при печати страницы. В общем, тонкая настройка костыли.

[Dima Polos]

Роман Кузнецов, ааа, ну тогда ок, просто этой предыстории не было, и если такое не уточнить, то совет про Grid это плохой совет. Вдруг кто-то сетку думает делать, а боится, что где-то отрыл в сети, что флексы не кроссбраузерно, и вот ищет варианты, а ему грид дают, в общем - курьезно вышло бы)))