Как присвоить контенту собственную высоту с помощью сетки?

Question

https://codepen.io/daniel-brown/pen/QWjXpXw

Мне нужно это li, чтобы иметь свой рост, а не чужой

Ожидаемый результат

div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div>


  <li>industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
  <li>Lorem ever since the 1500s, when an unknown </li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li>
  <li> unknown </li>
  <li>Lorem Ipsum is simply dummy text of thver since the 1500s, when an unknown </li>
  <li>L printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesettinry's standard dummy text ever since the 1500s, when an unknown </li>
  <li>Lorem Ipsum is simply dummy text of Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
  <li> when an unknown </li>
  <li>Lorem </li>

  </ul>

</div>

Answer 1

Я не могу его изменить, у меня есть эта структура ul li, и мне нужно отсортировать ее по сетке

• текст
• текст
• текст
• текст
• текст
• текст

Answer 2

Для этого используйте встроенное свойство css, чтобы добавить высоту к элементу li индивидуально

<li style="height:10px;"> text </li>

Но я бы предпочел использовать систему сетки bootstrap, а затем назначить параметр высоты с помощью встроенный стиль:

<div class="container">
<div class="row">
<div class="col-sm">
  <ul>
  <li style="height:10px;"> text </li>
  <li> text </li>
  </ul>
</div>
<div class="col-sm">
  <ul>
  <li> text </li>
  <li> text </li>
  </ul>
</div>
<div class="col-sm">
  <ul>
  <li> text </li>
  <li> text </li>
  </ul>
</div>