如何使具有相同高度的项目的多行答案

【问题标题】：How to make a multiply rows with items with equal height如何使具有相同高度的项目的多行
【发布时间】：2018-04-26 12:39:37
【问题描述】：

我有一个包含许多项目的 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

【问题讨论】：

请分享您的代码。

标签： twitter-bootstrap css grid css-grid

【解决方案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>

【讨论】：