3 行的特定网格布局，中间一列为自动

Question

我想制作一个如下所示的 CSS 网格：

想法是中间一行有固定的大小，另外两行占据剩余高度的一半。我事先不知道中间一行的大小。

纯 CSS 是否可行？如果可行，如何实现？

谢谢。

Answer 1

第二行的高度等于其内容的总高度。剩余的高度在第一行和最后一行之间平均分配。

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr auto 1fr; /* key rule */
  grid-gap: 10px;
  height: 400px;  
}

.wrapper div {
  background: red;
}

.three {
  grid-column: 1/-1;
}

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo quis, quas amet non molestias hic nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium. Three Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Nemo quis, quas amet non molestias hic nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium. Three Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo
    quis, quas amet non molestias hic nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium. Three Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo quis, quas amet non molestias hic
    nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium.
  </div>
  <div class="four">Four</div>
  <div class="five">Five</div>
</div>

.wrapper 现在有一个固定的高度。您应该删除此行：

height: 400px;

3 行的特定网格布局，中间一列为自动

Specific grid layout with 3 rows, middle one being auto

css

css-grid