不能用 .在网格模板区域中答案

【问题标题】：Can't make empty space with . in grid-template-areas不能用 .在网格模板区域中
【发布时间】：2021-12-05 09:16:06
【问题描述】：

我想在标题中留出空格。所以，我写了这样的代码。

header {
  grid-area: header;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: xxx-large;
  padding-top: 40px;
  border-bottom: 2px solid #222;
}

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    ".      header  header  ."
    "aside  section section section"
    "footer footer  footer  footer";
}

我希望点部分是空的。但是在标题下方的部分拥有该区域。

like this

如何使用网格模板区域创建空白空间？

【问题讨论】：

你的html在哪里？ ;-) 请提供你所有的代码！
您需要向我们展示任何相关的 CSS。你真的指定了它应该进入哪个网格区域吗？
从不混合命名区域和自动放置。

标签： css css-grid

【解决方案1】：

从您向我们展示的内容看来，除了标题之外，您还没有在网格中定位任何元素 - 这还不够。网格将使用它可以为任何没有特定定位的元素使用任何空白空间。

header {
  grid-area: header;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: xxx-large;
  padding-top: 40px;
  border-bottom: 2px solid #222;
  background: magenta;
}

aside {
  grid-area: aside;
  background: yellow;
}

section {
  grid-area: section;
  background: lime;
}

footer {
  grid-area: footer;
  background: cyan;
}

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: ".      header  header  ." "aside  section section section" "footer footer  footer  footer";
}

<header>HEADER</header>
<aside>ASIDE</aside>
<section>SECTION</section>
<footer>FOOTER</footer>

我为每个元素赋予了背景颜色，以便更清楚地知道哪个区域正在被哪个区域使用。

【讨论】：

【解决方案2】：

嗨，jimin，你可以在显示后在 body 上使用它：grid type justify-content:space-between

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。