Блог

У меня есть следующий код:

 .container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(30, 3.33%);
  grid-auto-flow: row;
}

.element1 {
  grid-row-start: 1;
  grid-row-end: 8;
  background-color: red;
}

.element2 {
  grid-row-start: 1;
  grid-row-end: 6;
  background-color: blue;
}

.element3 {
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: yellow;
}

.element4 {
  grid-row-start: 6;
  grid-row-end: 8;
  background-color: green;
}

.element5 {
  grid-row-start: 10;
  grid-row-end: 12;
  background-color: purple;
}

.element6 {
  grid-row-start: 12;
  grid-row-end: 14;
  background-color: orange;
}

  

Выходное изображение:

Вывод

И я хотел бы автоматически развернуть все поля, у которых нет поля с правой стороны, как показано на следующем рисунке:

Желаемый результат

Как я мог это сделать, не указывая вручную строку, в которой начинается поле и где заканчивается поле, просто автоматически .. есть ли какие-либо свойства CSS?

Большое вам спасибо.