css - 如何给 CSS 网格行一个高度，以便该行中的一个 div 的高度等于其中文本的高度？

Question

我有一个 3 列 1 行的网格。左右两列的 height 设置为 600px。中间一列里面有一些文本(文本高度小于 600 像素)。

我希望中间的列与其中的文本一样高，但是 column-template-rows: auto 使其高度与它周围的两个 div 相同，即 600px。

任何帮助将不胜感激。谢谢。

这是 HTML:

<div id='grid-container'>
    <div class='side-grid-item'>First column</div>
    <div id='grid-item'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class='side-grid-item'>Third column</div>
</div>

这是 CSS:

#grid-container {
    display: grid;
    grid-template-columns: 384px 512px 384px;
    grid-template-rows: auto auto auto; /* The second auto is where my problem is*/
}

.side-grid-item {
    height: 600px;
}

Answer 1

这里需要考虑alignment :

#grid-container {
  display: grid;
  grid-template-columns: 384px 512px 384px;
  align-items:start; /*added this*/
}
#grid-container > div {
  background:pink;
}
.side-grid-item {
  height: 600px;
}

<div id='grid-container'>
  <div class='side-grid-item'>First column</div>
  <div id='grid-item'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class='side-grid-item'>Third column</div>
</div>