Как попарно разместить блоки в контейнере не добавляя обёрток?
Приветствую!
Имеется неизвестное колличество блоков внутри контейнера заданной ширины.
Размер контейнера динамический.
Интересует возможно ли сделать так, чтобы блоки формировались по две строчки и переходили на слелующую колонку до того момента, пока они перестанут влезать.
А Когда перестают влезать переходили на новую строку.
Возможности обернуть блоки нет.
Есть ли хоть какое то решение задачи? Можно задать grid-template-rows: repeat(2, 1fr);
но как перенести при переполнении блока - не знаю.
Приложил фото примера, где цифры - это очерёдность расположения блоков в вёрстке.
Дополнительно:
если ты учишь гриды, то читай все свойства гридов и учись, примеры даже в документации есть, голову осталось немного включить и пальчиками по клавиатуре поклацать
переходили на слелующую колонку до того момента, пока они перестанут влезать.
Так не получится, можно только если с фиксированным количеством колонок
https://codepen.io/xdevelx/pen/abPpWzr
snippet
css grid все условия не выполнит, остается только писать медиа запросы и менять количество колонок и переопределять grid-column
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения блоков в контейнере попарно без добавления обёрток, можно воспользоваться свойством CSS `display: grid;` и задать контейнеру соответствующую сетку.
Пример кода на HTML и CSS:
<div class="container"> <div class="block">Block 1</div> <div class="block">Block 2</div> <div class="block">Block 3</div> <div class="block">Block 4</div> </div><div class="container"> <div class="block">Block 1</div> <div class="block">Block 2</div> <div class="block">Block 3</div> <div class="block">Block 4</div> </div>
.container { display: grid; grid-template-columns: 1fr 1fr; } .block { border: 1px solid black; padding: 10px; }
В данном примере, блоки будут размещены в контейнере по два в ряд благодаря заданной сетке с двумя колонками `grid-template-columns: 1fr 1fr;`. Свойство `display: grid;` позволяет легко управлять расположением элементов на странице без необходимости добавления дополнительных обёрток.
Таким образом, вы можете элегантно разместить блоки попарно в контейнере, используя CSS-сетку без лишних обёрток и сложных конструкций.