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

#css #css3 #css_grid #grid_layout

Как расположить колонки разной высоты друг под другом, при помощи 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;
}

  

  

  

  

  

  





    

Ответы

Ответ 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;
}

  

  

  

  

  

  






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


Ответ 2

Мне кажется, CSS 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;
}

  

  

  

  

  

  






Вариант с регионами


.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 40px 100px;
  grid-gap: 30px;
  grid-template-areas: "a a a" "b b b" "c c c";
  /* называем регионы */
}

.gallery__grid-item {
  background: #000;
}

.gallery__grid-item:nth-child(1) {
  grid-area: 1 / auto / 3 / auto;
  /*grid-area: a / auto / b / auto; тоже самое что и выше*/
}

.gallery__grid-item:nth-child(4) {
  grid-area: 2 / auto / 4 / auto;
  /*grid-area: b / auto / c / auto; тоже самое что и выше*/
}

.gallery__grid-item:nth-child(5) {
  grid-area: 1 / auto / 3 / auto;
  /*grid-area: a / auto / b / auto; тоже самое что и выше*/
}


Ответ 3

Вы можете также сделать это с помощью очень маленьких строк через свойство grid-auto-rows,
задавая каждому элементу нужный row span через свойство griw-row. Результат:



.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 5px;
  grid-auto-flow: row dense;
}

.gallery__grid-item {
  background: orange;
  grid-row: span 24;
  margin-bottom: 15px;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.gallery__grid-item:nth-child(2) {
  grid-row: span 27;
}

.gallery__grid-item:nth-last-child(2),
.gallery__grid-item:nth-last-child(3) {
  margin-bottom: 0;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9





К сожаленью, в данном способе видны два явных минуса:


Из-за смещения, пятый и шестой, восьмой и девятый и т.д. элементы поменялись местами.
Из-за этого пришлось немного менять вёрстку.
Приходится использовать margin вместо grid-gaps для задания промежутка между ячейками.