Как сформировать сетку 3 х 3 блоков любым способ с помощью CSS?

Question

[Lord_Dantes]

Подскажите пожалуйста как правильно сформировать сетку


В красном квадрате то что мы видим с устройства, далее идут блоки в ряд как бы и мы их скроллим туда чтобы посмотреть.
*скроллим типо там overflow-x: scroll;
И нужно чтобы n-количество блоков собирались там именно в 3 ряда. Блоков может быть сколько угодно, ширина любая.
Проблема в том что блоки выстраиваются вниз далее, а нужно чтобы в бок. Как можно реализовать такое?

Comments

[Рома Зварич]

Из вопроса непонятно, что именно у Вас не получается.
На CodePen вроде как раз то, что Вам нужно

Answer 1

[Lord_Dantes]

Спасибо Анониму который взял удалил свой ответ, не знаю зачем но вот решение.

https://codepen.io/lord-dantes/pen/YzKNLWW

Решение не мое, автор который сделал это испарился..

Answer 2

[азаза]

flex-wrap: nowrap ;

Answer 3

[cryolite]

div {
  width: calc(100%/3 - 4px);
  height: 50px;
  margin: 2px;
  background: red;
  flex: 1 0 auto;
}
section {
  display: flex;
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
}

Comments

[Lord_Dantes]

https://codepen.io/lord-dantes/pen/QWLdygZ
Не работает(

[cryolite]

Скриншота не было, поэтому не было изначально понятно.

https://jsfiddle.net/rc2wjLpf/1/
Ширину нужно подобрать, если нужно больше отступов в последнем ряду.

UPD: Вообще как уже предложили, лучше воспользоваться готовым слайдером в подобном случае.