Как циклом вывести список слов в блоке DIV, сверху-вниз, потом слева-направо

Question

Как циклом вывести список слов в блоке DIV, чтобы он формировался по вертикали сверху-вниз, а если не помещался в блок, перемещался вправо создавая новую колонку заполняя ее сверху-вниз, и так далее.

Answer 1

.container {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  width: 12rem;
}

.container > div {
  width: 33.33%;
}

<div class="container">
  <div>word 1</div>
  <div>word 2</div>
  <div>word 3</div>
  <div>word 4</div>
  <div>word 5</div>
  <div>word 6</div>
  <div>word 7</div>
  <div>word 8</div>
  <div>word 9</div>
</div>

Answer 2

Вот самый оптимальный вариант такого позиционирования элементов:

div {
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100px;
}

span {
  margin: 5px;
  flex: 0 1 auto;
  align-self: flex-start;
}

<div>
  <span>word 1</span>
  <span>word 2</span>
  <span>word 3</span>
  <span>word 4</span>
  <span>word 5</span>
  <span>word 6</span>
  <span>word 7</span>
  <span>word 8</span>
  <span>word 9</span>
</div>

upd. = комментарий: Допустим мне нужно третьему и восьмому элементу задать свой цвет, как это реализовать?

div {
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100px;
}

span {
  margin: 5px;
  flex: 0 1 auto;
  align-self: flex-start;
}

div>span:nth-child(3), div>span:nth-child(8) {color:red;}

<div>
  <span>word 1</span>
  <span>word 2</span>
  <span>word 3</span>
  <span>word 4</span>
  <span>word 5</span>
  <span>word 6</span>
  <span>word 7</span>
  <span>word 8</span>
  <span>word 9</span>
</div>

БЛОГ НА HUSL

Как циклом вывести список слов в блоке DIV, сверху-вниз, потом слева-направо

Ответы (2 шт):