Как разбить встроенные блоки максимум на 2 строки?

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

Я пробую код, который вы видите во фрагменте, но он не работает. Он размещает все блоки в одну строку.

let container = document.getElementById('container')
let numOfBlocks = 20 // could be any number
let blockSize = 200
let blockRightMargin = 10
let maxContainerWidth = Math.ceil(numOfBlocks/2)*(blockSize+blockRightMargin)

while (numOfBlocks) {
  let block = document.createElement('div')
  block.className = 'block'
  container.appendChild(block)
  numOfBlocks--
}

container.style['max-width'] = maxContainerWidth + 'px'
#horizontal-scroller {
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  max-width: 420px;
  overflow-x: auto;
}

#container {
  position: relative;
  float: left;
  height: auto;
  width: auto;
  text-align: left;
  font-size: 0;
  white-space: nowrap;
}

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  background: lime;
}
<div id="horizontal-scroller">
  <div id="container"></div>
</div>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте сетку CSS:

#horizontal-scroller {
  position: relative;
  max-width: 420px;
  overflow-x: auto;
  display: grid;
  grid-template-rows: 1fr 1fr; /* 2 rows */
  grid-auto-flow: column;
  gap: 10px;
}

#horizontal-scroller > div {
  width: 150px;
  height: 150px;
  background: lime;
}
<div id="horizontal-scroller">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Другие вопросы по теме