如何用grid给内容分配自己的高度？

Question

https:/codepen.iodaniel-brownpenQWjXpXw。

我需要这个李，有自己的高度，而不是别人的高度。

预期成果

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 inline属性为li元素单独添加高度。

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

但我更建议使用bootstrap网格系统，然后使用inline styling分配高度参数。

<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>