html - 网格项不会占据父容器的全高

Question

我正在尝试在嵌套网格元素中创建三个元素。正如您从代码中看到的那样，我将“面板”div 放在“巨型”和“内容”div 之间。我还在里面嵌套了三个div。在 CSS 中，我在 .panels 中添加了一个嵌套网格。

我希望“面板”div 在垂直轴上分成三个大小相等的部分。想象三个方 block 一个接一个地叠起来。但是嵌套元素不会填满整个“面板”div。如果运行代码片段，您可以看到面板是嵌套的，但没有占据整个空间。他们占 parent 的一小部分。我将 background-color: white !important 添加到嵌套面板之一以显示它有多小。

另一个例子可以在这里看到:https://codepen.io/rachelandrew/pen/NqQPBR/

但同样，嵌套的 E、F 和 G 项不会展开以填满整个 D 部分。

有没有办法让三个面板填充它们的父面板？

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}

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

.jumbo {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

.panels {
    grid-column: 3 / 9;
    grid-row: 4 / 6;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.panel1 {
    grid-row: 1 / 2;
    grid-row: 1;
    background-color: white !important;
    z-index: 2;
}

.content {
    grid-column: 1 / -1;
    grid-row: 5 / 7;
}

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

/* Styling */
.container > div {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
}

html, body {
    background-color: #ffeead;
    box-sizing: border-box;
    height: 100%;
    margin: 0px;
    font-family: "Work Sans"
}

.container > div:nth-child(1n) {
    background-color: #96ceb4;
}

.container > div:nth-child(3n) {
    background-color: #88d8b0;
}

.container > div:nth-child(2n) {
    background-color: #ff6f69;
}

.container > div:nth-child(4n) {
    background-color: #ffcc5c;
}

.panels > div:nth-child(1n) {
    background-color: #96ceb4;
}

<div class="container">
    <div class="header">
        HEADER
    </div>
    <div class="jumbo">
        JUMBO
    </div>
    <div class="panels">
        <div class="panel1">PANEL1</div>
        <div class="panel2">PANEL2</div>
        <div class="panel3">PANEL3</div>
    </div>
    <div class="content">
        CONTENT
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>

Answer 1

您已将 align-items: center 应用于嵌套网格容器 (.panels)。

使用该规则，您可以覆盖默认的 align-items: stretch，这会将您的网格元素设置为父级的全高。相反，您将元素垂直居中。

因此它们可以是全高，从 .panels 元素中删除 align-items: center:

.container > div:not(.panels) {
   align-items: center;
}

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}

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

.jumbo {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

.panels {
    grid-column: 3 / 9;
    grid-row: 4 / 6;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.panel1 {
    grid-row: 1 / 2;
    grid-row: 1;
    background-color: white !important;
    z-index: 2;
}

.content {
    grid-column: 1 / -1;
    grid-row: 5 / 7;
}

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

/* Styling */
.container > div {
    display: grid;
    justify-content: center;
    /* align-items: center; */
    font-size: 2em;
    color: #ffeead;
}

/* new */
.container > div:not(.panels) {
  align-items: center;
}

html, body {
    background-color: #ffeead;
    box-sizing: border-box;
    height: 100%;
    margin: 0px;
    font-family: "Work Sans"
}

.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n)    { background-color: #96ceb4; }

<div class="container">
    <div class="header">HEADER</div>
    <div class="jumbo">JUMBO</div>
    <div class="panels">
        <div class="panel1">PANEL1</div>
        <div class="panel2">PANEL2</div>
        <div class="panel3">PANEL3</div>
    </div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

然后，为了使 .panels 的内容垂直居中，我会直接定位内容:

.panels > div {
  display: flex;
  align-items: center;
}

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}

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

.jumbo {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

.panels {
    grid-column: 3 / 9;
    grid-row: 4 / 6;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.panel1 {
    grid-row: 1 / 2;
    grid-row: 1;
    background-color: white !important;
    z-index: 2;
}

.content {
    grid-column: 1 / -1;
    grid-row: 5 / 7;
}

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

/* Styling */
.container > div {
    display: grid;
    justify-content: center;
    /* align-items: center; */
    font-size: 2em;
    color: #ffeead;
}

/* new */
.container > div:not(.panels) {
  align-items: center;
}

/* new */
.panels > div {
  display: flex;
  align-items: center;
}

html, body {
    background-color: #ffeead;
    box-sizing: border-box;
    height: 100%;
    margin: 0px;
    font-family: "Work Sans"
}

.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n)    { background-color: #96ceb4; }

<div class="container">
    <div class="header">HEADER</div>
    <div class="jumbo">JUMBO</div>
    <div class="panels">
        <div class="panel1">PANEL1</div>
        <div class="panel2">PANEL2</div>
        <div class="panel3">PANEL3</div>
    </div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

请记住，网格容器中存在三个结构级别:

• 容器
• 元素(容器的 child )
• 内容(元素的子项)

网格属性只在父子之间起作用。

因此，当您在容器上应用网格居中属性时，它们将应用于元素，而不是内容。要使内容居中，您需要将元素视为父项，将内容视为子项。

这里有对这些概念和方法的更深入的解释:Centering in CSS Grid