Bootstrap. Высота изображений

163

02 февраля 2020, 20:50

Всем привет. Возник вопрос. Как я могу создать сетку из изображений с разной высотой? Чтобы сетка была такой: Grid

В Bootstrap 3 это вроде автоматически задается. В Bootstrap 4 все колонны с одинаковой высотой.

Заранее благодарен.

Answer 1

Я набросал Вам примерный вариант, как это можно сделать на grid:

.grid { 
  border: 1px dashed gray; 
  max-width: 900px; 
  margin: 0 auto; 
  display: grid; 
  grid-gap: 10px; 
  grid-template-columns: repeat(5, auto); 
  grid-template-rows: repeat(11, 30px); 
} 
.grid-item { 
  background-color: #7cb2d8; 
} 
.grid-item1, 
.grid-item2 { 
  grid-row: 1 / 6; 
} 
.grid-item3 { 
  grid-row: 1 / 10; 
} 
.grid-item4 { 
  grid-column: 4 / 6; 
  grid-row: 1 / 5; 
} 
.grid-item5 { 
  grid-column: 2 / 3; 
  grid-row: 10 / 12; 
} 
.grid-item6 { 
  grid-column: 3 / 5; 
  grid-row: 10 / 12; 
} 
.grid-item7 { 
  grid-row: 6 / 12; 
} 
.grid-item8 { 
  grid-row: 6 / 10; 
} 
.grid-item9 { 
  grid-row: 5 / 10; 
} 
.grid-item10 { 
  grid-row: 5 / 12; 
}

<div class="grid"> 
  <div class="grid-item grid-item1"></div> 
  <div class="grid-item grid-item2"></div> 
  <div class="grid-item grid-item3"></div> 
  <div class="grid-item grid-item4"></div> 
  <div class="grid-item grid-item5"></div> 
  <div class="grid-item grid-item6"></div> 
  <div class="grid-item grid-item7"></div> 
  <div class="grid-item grid-item8"></div> 
  <div class="grid-item grid-item9"></div> 
  <div class="grid-item grid-item10"></div> 
</div>