How to make a multiply rows with items with equal height

Question

I have a div with many items.

The height of this items can be changeable (When the locale of the site is changed).

Can I display these items in rows and the height of these items should be equal? Maybe via CSS Grid, because Flex doesn't support this functionality. Maybe there is not JS solution?

See the attached image:

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

Try this using css grid

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