Question

我有一个3列，1行网格。左列和右列的height设置为600px。中间列中有一些文本（文本小于600px高）。

我希望中间列与其中的文本一样高，但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：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何为CSS网格行指定一个高度，以使行中某个div的高度等于其中文本的高度？

1 个答案: