Как разбить список на три колонки без указания фиксированной высоты?

Question

Мне необходимо разбить список на три колонки и чтобы элементы шли по-порядку сверху вниз, а не слева направо.

Ограничивать высоту тоже нельзя. Через flex-direction: column не выходит.

Я нашел свойство columns. Но оно криво работает, для текста, наверное, хорошо подойдет. Подскажите какой-нибудь способ. Спасибо за ответ.

Сейчас в моем пример стоит columns, но он криво переносит элементы (подсказки, которые всплывают при наведение - разрезаются)

body {
  font-size: 20px;
  font-family: sans-serif;
}
ul {
  columns: 3;
  padding-bottom: 40px;
}
li {
  list-style: none;
  position: relative;
  margin-bottom: 30px;
  break-inside: avoid;
  backface-visibility: hidden;
}
.tooltip {
  border-radius: 8px;
  padding: 10px 15px;
  background-color: #ef0079;
  width: fit-content;
  color: #fff;
  position: absolute;
  top: 50px;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
span {
  color: #fff;
  background-color:#087eff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
}
span:hover + .tooltip {
  opacity: 1;
  break-inside: avoid;
  backface-visibility: hidden;
}

<ul>
  <li>
    <span>Яблоко 1</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 2</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 3</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 4</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 5</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li><li>
    <span>Яблоко 6</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 7</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 8</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
</ul>

Answer 1

Можно использовать другую структуру HTML.

body {
  font-size: 20px;
  font-family: sans-serif;
}
#cont {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.three {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.three div {
  position: relative;
  margin-bottom: 30px;
}
.three div .tooltip {
  border-radius: 8px;
  padding: 10px 15px;
  background-color: #ef0079;
  width: fit-content;
  color: #fff;
  position: absolute;
  top: 30px;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
span {
  color: #fff;
  background-color:#087eff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}
span:hover + .tooltip {
  opacity: 1;
}

<div id="cont">
  <div class="three">
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
  </div>
  
  <div class="three">
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
  </div>
  
  <div class="three">
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
    <div>
      <span>Яблоко</span>
      <div class="tooltip">очень сладкое яблоко</div>
    </div>
  </div>
</div>

Answer 2

Можно задать списку display: grid, установить количество колонок grid-template-columns: repeat(3, 1fr), а чтобы элементы шли сверху вниз (а не слева направо), определить количество рядов grid-template-rows: repeat(3, 1fr) и направление grid-auto-flow: column:

body {
  font-size: 20px;
  font-family: sans-serif;
}
ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}
li {
  list-style: none;
  position: relative;
  margin-bottom: 30px;
}
.tooltip {
  border-radius: 8px;
  padding: 10px 15px;
  background-color: #ef0079;
  width: fit-content;
  color: #fff;
  position: absolute;
  top: 30px;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
span {
  color: #fff;
  background-color:#087eff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}
span:hover + .tooltip {
  opacity: 1;
}

<ul>
  <li>
    <span>Яблоко 1</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 2</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 3</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 4</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 5</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li><li>
    <span>Яблоко 6</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 7</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 8</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
</ul>

Answer 3

Тогда к предыдущему решению можно добавить немного js-логики: "на лету" подсчитывать общее количество элементов, делить на 3 колонки и в зависимости от этого устанавливать количество рядов:

// делим количество элементов на 3 колонки и округляем в бОльшую сторону
let rows = Math.ceil($('ul li').length / 3);

$('ul').css('grid-template-rows','repeat('+rows+', 1fr)');

body {
  font-size: 20px;
  font-family: sans-serif;
}
ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}
li {
  list-style: none;
  position: relative;
  margin-bottom: 30px;
}
.tooltip {
  border-radius: 8px;
  padding: 10px 15px;
  background-color: #ef0079;
  width: fit-content;
  color: #fff;
  position: absolute;
  top: 30px;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
span {
  color: #fff;
  background-color:#087eff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}
span:hover + .tooltip {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Яблоко 1</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 2</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 3</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 4</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 5</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li><li>
    <span>Яблоко 6</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 7</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 8</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
    <li>
    <span>Яблоко 9</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
  <li>
    <span>Яблоко 10</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
    <li>
    <span>Яблоко 11</span>
    <div class="tooltip">очень сладкое яблоко</div>
  </li>
</ul>

БЛОГ НА HUSL

Как разбить список на три колонки без указания фиксированной высоты?

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