CSS网格布局中元素的动态高度

Question

我会使用CSS Grid准备一些博客布局。目前，我正在尝试指定红色元素的动态高（会有帖子）。我认为应该根据内容自动折叠行（不能调整右列的大小）。不幸的是，我不知道如何编写此规则。

我在Codepen上保留了一个虚拟规则来设置结束行=19。它显示了最终外观，但不是动态的。我知道红色和绿色元素位于同一行，这可能很困难。

如果您有任何想法，请与我分享。问候！

https://codepen.io/SeboFE/pen/zXBrQx

Set

html, body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-size: 20px;
}

/* fw = full width */
.grid-12-col-fw{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

/* For visualize layout grid */
.item{
/*   width: 100%; */
  height: 100%;
  background-color: aqua;
}

.top-fullwidth-navbar{
  /* width: 100vw; */
  min-height: 8vh;
  max-height: 10vh;
  padding: 0.4rem;

  grid-column-start: 1;
  grid-column-end: -1;
  align-items: center;

  background-color: blue;
}

.filter-component{
  grid-column-start: 2;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 3;

  padding: 0.4rem;

  background-color: pink;
}

.current-date-component{
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 9;
  grid-column-end: -2;

  padding: 0.4rem;
  background-color: purple;
}

.posts-component{
  height: 1000px;
  grid-row-start: 3;
  grid-row-end: 10;
  grid-column-start: 2;
  grid-column-end: 9;

  padding: 0.4rem;
  background-color: red;
}

.popular-posts-component{
  grid-row-start: 3;
  grid-column-start: 9;
  grid-column-end: -2;

  padding: 0.4rem;
  background-color: green;
}

.choosed{
  grid-row-start: 4;
  grid-column-start: 9;
  grid-column-end: -2;

  padding: 0.4rem;
  background-color: orange;
}

.subscribe{
  grid-row-start: 5;
  grid-column-start: 9;
  grid-column-end: -2;

  padding: 0.4rem;
  background-color: gray;
}