为什么在宽媒体上使用时我的内容网格区域会更长？答案

【问题标题】：Why is my content grid area longer when used on wide media?为什么在宽媒体上使用时我的内容网格区域会更长？
【发布时间】：2017-08-03 10:52:52
【问题描述】：

免责声明：我不是经验丰富的网页设计师。

我一直在玩网格，并为不同的屏幕尺寸制作了这个模型，但我不明白为什么 div 内容区域比其中嵌套的 panelwrap 网格高得多？（我在 Chrome 上测试）。

根据 chrome 检查器，仅当内容区域的宽度超过 647 像素时，尺寸才会增加。

我只是想了解为什么会出现空格？

body {
  margin: 1em;
}

.sidebar {
  grid-area: sidebar;
}

.sidebar2 {
  grid-area: sidebar2;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
  background-color: #fff;
  color: #444;
}

.wrapper {
  margin: auto;
  display: grid;
  grid-gap: 1em;
  grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}

@media only screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 20% auto;
    grid-template-areas: "header   header" "sidebar  content" "sidebar2 sidebar2" "footer   footer";
  }
}

@media only screen and (min-width: 600px) {
  .wrapper {
    grid-gap: 20px;
    grid-template-columns: 120px auto 120px;
    grid-template-areas: "header  header  header" "sidebar content sidebar2" "footer  footer  footer";
    max-width: auto;
  }
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 0.5em;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}

.panelwrap {
  display: grid;
  padding: 0.5em;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(auto, auto);
  grid-gap: 0.5em;
}

.panel {
  background-color: #fff;
  color: #555;
  border-radius: 5px;
  padding: 0.5em;
}

.tall-panel {
  grid-row-end: span 2;
}

.wide-panel {
  grid-column-end: span 2;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content
    <div class="panelwrap">
      <div class="panel">Panel A</div>
      <div class="panel">Panel B</div>
      <div class="panel tall-panel">Panel C</div>
      <div class="panel">Panel D</div>
      <div class="panel">Panel E</div>
      <div class="panel">Panel F</div>
      <div class="panel tall-panel">Panel G</div>
      <div class="panel tall-panel">Panel H</div>
      <div class="panel">Panel I</div>
      <div class="panel">Panel J</div>
      <div class="panel wide-panel">Panel K</div>
    </div>
  </div>
  <div class="box footer">Footer</div>
</div>

【问题讨论】：

我不完全理解你的问题。您具体指的是哪个空间？似乎在所有 3 个可能的媒体查询中都有一个空格。但我想这是由于网格项大于您指定的指定大小（除了在最大的媒体查询中，由于最后一个网格项不足以填充它，因此空间只是空置）。由于网格项大于剩余的行空间，因此将其移动到下一行。在.panelwrap 中再次执行grid-template-areas 可能会更容易

标签： html css

【解决方案1】：

我认为这可能是当时 Chrome 浏览器的问题（不确定我使用的版本，但我现在使用的是版本 63.0.3239.84）。

我刚刚测试了相同的代码，内容区域现在与其中的项目匹配。以前，当显示 > 647px 宽时，内容区域比其中的面板长得多。

【讨论】：