如何使用相同高度的项目进行乘法行

Question

我有一个包含很多项目的div。

此项目的高度可以更改（当站点的区域设置更改时）。

我可以在行中显示这些项目，这些项目的高度应该相等吗？也许是通过CSS Grid，因为Flex不支持此功能。也许没有JS解决方案？

参见附图：

HTML：

DialogFragment#show

Answer 1

使用css grid

尝试此操作

＆＃13;

＆＃13;

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background: teal;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="container">
  <div class="item">01</div>
  <div class="item">02</div>
  <div class="item">03</div>
  <div class="item">04</div>
  <div class="item">05</div>
  <div class="item">0606060606060 60606060606 0606060606060606 060606060606060606 060606060606 060606060606 0606060606 06060606</div>
  <div class="item">07</div>
  <div class="item">08</div>
  <div class="item">09</div>
</div>

＆＃13;

＆＃13;

＆＃13;