为什么我的嵌套网格容器没有创建等宽列？答案

【问题标题】：Why is my nested grid-container not creating equal width columns?为什么我的嵌套网格容器没有创建等宽列？
【发布时间】：2019-07-03 22:40:01
【问题描述】：

所以我是 CSS 网格的新手，我一直在玩弄它。我正在尝试看看我是否可以将这个模型的布局与我一直在编写的一些实验代码相匹配：https://ibb.co/GFYqMRx

这是我的 HTML：

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body class="body">


    <div class="header">Header</div>
    <div class="side-navigation">Side Navigation</div>

    <main class="main">
      <div class="item search">Search</div>
      <div class="item traffic">Traffic</div>
      <div class="item daily-traffic">Daily Traffic </div>
      <div class="item mobile-users">Mobile Users</div>
      <div class="item social-stats">Social Stats</div>
      <div class="item new-members">New Members</div>
      <div class="item recent-activity">Recent Activity</div>
      <div class="item message-user">Message User</div>
      <div class="item settings">Settings</div>
    </main>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> 
    <script src="app.js"></script>
  </body>
</html>

这是我的 CSS：

* {
  box-sizing: border-box;
}
.item {
  border: 1px red solid;
}

.header {
  background-color: purple;
  grid-area: header;
}
.side-navigation {
  background-color: orange;
  grid-area: side-navigation;
}
.main {
  background-color: grey;
  grid-area: main;
}

.search {
  grid-area: search;
}
.traffic {
  grid-area: traffic;
}
.daily-traffic {
  grid-area: daily-traffic;
}
.mobile-users {
  grid-area: mobile-users;
}
.social-stats {
  grid-area: social-stats;
}
.new-members {
  grid-area: new-members;
}
.recent-activity {
  grid-area: recent-activity;
}
.message-user {
  grid-area: message-user;
}
.settings {
  grid-area: settings;
}
body {
  display: grid;
  grid-template-rows: 80px 80px 1fr;
  grid-template-areas: 
  "header"
  "side-navigation"
  "main";
}


@media (min-width: 769px) {

  body {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 80px 1fr;
    grid-template-areas:
    "header header"
    "side-navigation main"
  }
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  } 
}

我首先能够通过操纵网格线来创建所需的布局，但我想看看我是否可以通过单独使用 grid-template-areas 属性来做同样的事情。

对于大于 769 像素的屏幕尺寸，我将嵌套的主容器分成两列，每列 1fr，但安装第三列后我最终得到了一些奇怪的效果：

为什么我无法在嵌套的主容器中创建等宽列？如果我为 grid-template-columns 放置两个 fr 单位，我的网格不应该被平均分成两半吗？

在我将网格应用于嵌套的主容器之前，一切都运行良好。

为什么我的网格项目在屏幕底部像这样乱七八糟？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

我认为这与所有 grid-area: 标签有关，没有 grid-template-areas: 规则来定义它们的去向。我刚刚在开发工具中检查了您的代码，当我删除那些 grid-area: 标签时，它变成了一个 2 列网格。

为 .main 添加一个网格模板区域

.main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
    grid-template-areas: 
      "search          traffic"
      "daily-traffic   mobile-users"
      "social-stats    new-members"
      "recent-activity message-user"
      "settings        ............";
}

grid-template-areas 中的所有额外（超过 1 个）空白都会被忽略，因此您可以添加额外的空格来对齐列。另外，请注意“。”最后你使用'。或多个（就像多余的空白被忽略）表示将该单元格留空。如果您在最后删除这些句点，整个事情就会中断，每个单元格都必须在您的网格模板区域中进行说明。

Rachel Andrew 有很多关于 CSS 网格的优秀材料。 https://www.youtube.com/watch?v=RssSS_xhv2E

【讨论】：

好吧，基本上你是说因为我在 body 上使用了 grid-area-template 格式，所以我需要保持一致并在嵌套的网格容器上使用它，对吧？
您需要在每个网格上下文中保持一致。网格区域和网格模板区域一起工作。你不能没有另一个。如果你只有 grid-area 而没有 grid-template-areas 网格不知道你想把每个元素放在哪里。如果要删除 main 内所有 div 上的网格区域标签，则不需要网格模板区域，自动放置只会按照源代码的顺序排列它们。您可以使用行放置来布置它们。您在 body 上使用 grid-temp-area 并不意味着您必须在 .main 中使用它们，它们是两个独立的网格上下文。

【解决方案2】：

这是因为您使用主网格为元素提供了网格区域，而实际上并未使用 main 上的 grid-area 属性。我在 sn-p 中删除了这些，主网格显示为 2 个相等的列：

* {
  box-sizing: border-box;
}

.item {
  border: 1px red solid;
}

.header {
  background-color: purple;
  grid-area: header;
}

.side-navigation {
  background-color: orange;
  grid-area: side-navigation;
}

.main {
  background-color: grey;
  grid-area: main;
}

.search {}

.traffic {}

.daily-traffic {}

.mobile-users {}

.social-stats {}

.new-members {}

.recent-activity {}

.message-user {}

.settings {}

body {
  display: grid;
  grid-template-rows: 80px 80px 1fr;
  grid-template-areas: "header" "side-navigation" "main";
}

@media (min-width: 769px) {
  body {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 80px 1fr;
    grid-template-areas: "header header" "side-navigation main"
  }
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  }
}

<body>
  <div class="header">Header</div>
  <div class="side-navigation">Side Navigation</div>

  <main class="main">
    <div class="item search">Search</div>
    <div class="item traffic">Traffic</div>
    <div class="item daily-traffic">Daily Traffic </div>
    <div class="item mobile-users">Mobile Users</div>
    <div class="item social-stats">Social Stats</div>
    <div class="item new-members">New Members</div>
    <div class="item recent-activity">Recent Activity</div>
    <div class="item message-user">Message User</div>
    <div class="item settings">Settings</div>
  </main>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script src="app.js"></script>
</body>

【讨论】：

哦，你是说我没有在 main 上使用 grid-area-template 并且我已经用网格区域标记了 main 内的元素。
是的，如果您在子元素中使用 grid-area，则需要声明父元素（主）的 grid-template-areas 属性。