网格项不会占用父容器的全高

【问题标题】：Grid item won't take full height of parent container网格项不会占用父容器的全高
【发布时间】：2018-06-20 04:28:11
【问题描述】：

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

我希望将“面板”div 在垂直轴上分成三个大小相等的部分。想象三个方块一个接一个地堆叠起来。但嵌套项目不会填满整个“面板”div。如果你运行代码 sn -p，你可以看到面板是嵌套的，但不会占用整个空间。他们只占父母的一小部分。我在其中一个嵌套面板中添加了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>

【问题讨论】：

    标签： html css web-deployment css-grid


    【解决方案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>

    请记住，网格容器中有三个结构级别：

    • 容器
    • 项目（容器的子项）
    • 内容（项目的子项）

    网格属性仅在父子节点之间起作用。

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

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

    【讨论】：

      【解决方案2】：

      好吧，您所做的是，您在“面板”div 中创建了三列：

      grid-template-columns: repeat(3, 1fr);

      但是你只给了孩子一个位置（两次）：

      grid-row: 1 / 2;
grid-row: 1;

      因此，如果您将 '.panels' 中的 'columns' 更改为 'rows' 并清理 '.panel1' 的代码，它应该可以正常工作！

      【讨论】：

      • 你说得对，我不应该两次声明这些行。我的错。我后来意外地把它放进去了。但即使我改变了这两行，也不能解决问题。我应该如何在面板 div 中更改 grid-template-columns？
      • 很抱歉，我认为我没有正确传达您的代码中的问题。您已经声明了三列，因此代码执行了它应该执行的操作。创建三个不同的列。一列是一个“表格单元格”，因此它适用于一行。发生的情况是它将被放置在彼此旁边。为了使它们彼此下方，您必须将它们放置在不同的行而不是列上。所以改变“grid-template-columns: repeat(3, 1fr);”到“网格模板行：重复（3、1fr）；”它会做你想做的事。
      【解决方案3】：

      感谢大家的建议。我通过删除嵌套的“面板”并简单地创建三个不同的面板来填充相同的空间来解决这个问题。 

      .container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: 50px 218px 218px 200px 80px 530px 40px;
}

.header {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 3;
}

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

.panel1 {
    background-color: white !important;
    z-index: 1;
    grid-column: 3 / 6;
    grid-row: 4 / 6;
}

.panel2 {
    background-color: black !important;
    z-index: 1;
    grid-column: 6 / 9;
    grid-row: 4 / 6;
}

.panel3 {
    background-color: purple !important;
    z-index: 2;
    grid-column: 9 / 12;
    grid-row: 4 / 6;
}

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

.content-right {
    grid-column: 5 / -1;
    grid-row: 5 / 7;
    display: grid;
    grid-gap: 5px;
    align-items: start;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr)
}

.content-right > div {
    background-color: white;
    z-index: 2;
}

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

.container > div {
    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="panel1">PANEL1</div>
    <div class="panel2">PANEL2</div>
    <div class="panel3">PANEL3</div>
    <div class="content-left">
        CONTENT-LEFT
    </div>
    <div class="content-right">
        <div class="content-right1">1</div>
        <div class="content-right2">2</div>
        <div class="content-right3">3</div>
        <div class="content-right4">4</div>
        <div class="content-right5">5</div>
        <div class="content-right6">6</div>
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2022-01-19
        • 2018-07-26
        • 1970-01-01
        • 2022-01-25
        • 1970-01-01
        • 2013-06-23
        • 1970-01-01
        • 2018-11-14
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode