使用display:grid布局时，如何让<li>条目拥有等高行？

我的CSS代码 #

h3 {
  font-family: Tahoma;
}
p {
  width: 300px;
  box-shadow: 2px 2px 5px #888888;
  border-radius: 12px;
  background-color: rgba(255, 255, 0, 1);
}
ul {
  list-style-type: none;
}

#main_table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 8fr;
  grid-auto-rows: 1fr;
}
#img1 {
  background-color: lightblue;
}
li {
  border: 1px solid black;
}
#img2 {
  background-color: lightgreen;
}
#num1 {
  background-color: beige;
}
#text1 {
  background-color: pink;
}

我的HTML代码 #

<div id="main_table">
  <div id="img1">
    <ul>
      <li> image 1 </li>
      <li> image 2 </li>
    </ul>
  </div>
  <div id="img2">
    <ul>
      <li> image on first row </li>
      <li> second row </li>
    </ul>
  </div>
  <div id="num1">
    <ul>
      <li> 24 </li>
      <li> a long entry </li>
      <ul>
  </div>
  <div id="text1">
  </div>
</div>

问题说明 #

当前页面中<li>的行高度不一致。我尝试过使用grid-auto-rows: 1fr;（已添加到#main_table的CSS中），但问题依然存在，效果如下：

问题根源 #

grid-auto-rows: 1fr控制的是网格容器#main_table的行高度，也就是#img1、#img2这些网格项的高度是相等的，但<li>是每个网格项内部的子元素，外层Grid布局不会自动同步这些内部元素的高度。

方案1：给内部

添加Grid布局 #

让每个网格项里的<ul>也变成Grid容器，强制内部<li>均分父元素高度：

#main_table > div > ul {
  display: grid;
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
}

因为外层网格项的高度已经被统一，内部<li>会自动均分高度，最终所有列的<li>行高保持一致。

方案2：使用Flexbox嵌套布局 #

如果更偏好Flexbox，可以通过多层Flex布局实现：

#main_table > div {
  display: flex;
}
#main_table > div > ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
#main_table > div > ul > li {
  flex: 1;
  display: flex;
  align-items: center; /* 可选：让文字垂直居中 */
}

额外修复 #

注意你的HTML代码中#num1内部的<ul>标签未闭合，这可能导致渲染异常，需要修正：

<div id="num1">
  <ul>
    <li> 24 </li>
    <li> a long entry </li>
  </ul> <!-- 补上闭合标签 -->
</div>

内容的提问来源于stack exchange，提问作者Cheetaiean