CSS Grid колонки разной высоты

548

07 марта 2018, 05:51

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

Тут пример кода:

.gallery__grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 30px; 
} 
 
.gallery__grid-item { 
  background: #000; 
} 
 
.gallery__grid-item:nth-child(even) { 
  height: 150px; 
} 
 
.gallery__grid-item:nth-child(odd) { 
  height: 120px; 
}

<div class="gallery__grid"> 
  <div class="gallery__grid-item"><img src="img/gallery/1.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/2.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/3.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/4.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/5.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/6.png" alt=""></div> 
</div>

Answer 1

Как вы уже поняли CSS Grid позволяет генерировать разметку только с прямоугольными элементами. Поэтому чтобы у вас получилось, можно поиграться с position: relative и отрицательными margin.

Пример (будет работать для любого кол-ва строк с элементами):

.gallery__grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 15px; 
} 
 
.gallery__grid-item { 
  background: orange; 
  height: 120px; 
} 
 
.gallery__grid-item:nth-child(2) { 
  height: 135px; 
  margin-top: -15px; 
} 
 
.gallery__grid-item:nth-child(3n + 2) { 
  position: relative; 
  top: 15px; 
} 
 
.gallery__grid-item:nth-last-child(1), 
.gallery__grid-item:nth-last-child(3) { 
  height: 135px; 
}

<div class="gallery__grid"> 
  <div class="gallery__grid-item"></div> 
  <div class="gallery__grid-item"></div> 
  <div class="gallery__grid-item"></div> 
  <div class="gallery__grid-item"></div> 
  <div class="gallery__grid-item"></div> 
  <div class="gallery__grid-item"></div> 
</div>

Данный пример будет работать корректно, если у нас 3 столбца и кол-во элементов кратно трём.

Answer 2

Добрый день, мне кажется, grid задумывалась не для того что бы играться с марджинами, поставьте ваши ячейки в нужные строчки или используйте grid-areas.

.gallery__grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: 100px 40px 100px; 
  grid-gap: 30px; 
} 
 
.gallery__grid-item { 
  background: #000; 
} 
.gallery__grid-item:nth-child(1) { 
  grid-row-start: 1; 
  grid-row-end: 3;  
} 
.gallery__grid-item:nth-child(4) { 
  grid-row-start: 2; 
  grid-row-end: 4; 
} 
.gallery__grid-item:nth-child(5) { 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

<div class="gallery__grid"> 
  <div class="gallery__grid-item"><img src="img/gallery/1.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/2.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/3.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/4.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/5.png" alt=""></div> 
  <div class="gallery__grid-item"><img src="img/gallery/6.png" alt=""></div> 
</div>