Как сделать несколько строк с элементами с одинаковой высотой - PullRequest
Новая
       17

Как сделать несколько строк с элементами с одинаковой высотой

0 голосов
/ 26 апреля 2018

У меня есть div с большим количеством предметов.

Высота этого элемента может быть изменена (при изменении локали сайта).

Можно ли отображать эти элементы в строках, а высота этих элементов должна быть одинаковой? Возможно через CSS Grid, потому что Flex не поддерживает эту функцию. Может быть, нет решения JS?

Смотрите прикрепленное изображение: The items with the equal content One of the items has bigger content

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

1 Ответ

0 голосов
/ 26 апреля 2018

Попробуйте это с помощью 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>
...