如何使用具有相同高度的项目制作乘法行

Question

我有一个 div 有很多项目。

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

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

见附图：

HTML:

<div class="row row-small-gutter index-devicePanel-3A9CQ">
<div class="col-md-4">
  <button class="index-deviceItem-1zoFC"> 
     <span>PC/Workstation</span>
  </button></div>
<div class="col-md-4">
  <button class="index-deviceItem-1zoFC">
    <span>Storage Array</span>
  </button></div>
<div class="col-md-4">
   <button class="index-deviceItem-1zoFC">
      <span>Networking</span>
   </button></div>
<div class="col-md-4">
  <button class="index-deviceItem-1zoFC">
     <span>Servers</span>
  </button></div>

</div

Answer 1

尝试使用 css 网格

.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;
}

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

如何使用具有相同高度的项目制作乘法行

How to make a multiply rows with items with equal height

css

grid

twitter-bootstrap

css-grid