CSS 网格和语义 HTML答案

【问题标题】：CSS grid and semantic HTMLCSS 网格和语义 HTML
【发布时间】：2019-10-22 16:49:42
【问题描述】：

我正在学习 CSS 网格，在尝试布局和使用语义 html 的同时遇到了一些问题

所以基本上我在做 3x3 的网格，左右两边是空白，中间是内容

.grid-container {
  display: grid;
  grid-template-columns: 1fr 40em 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    " . header . "
    " . content . "
    " . footer . ";
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

.header, .content, .footer {
  border: 1px solid red;
}

<div class="grid-container">
  <header>
    <div class="header">header</div>
  </header>
  <main>
    <div class="content">content</div>
  </main>
  <footer>
    <div class="footer">footer</div>
  </footer>
</div>

从上面的 codepen 中可以看出，这是行不通的。如果我remove the semantic tags it works，显然必须有正确的方法来做到这一点

【问题讨论】：

display: contents 是一种解决方法

标签： html css css-grid semantic-markup

【解决方案1】：

网格模板用于直系后代。

语义元素应该被标记名引用，而不是类：

/* changed from .header, which is a _child_ of header */
header {
  grid-area: header;
}

/* changed from .content, which is a _child_ of main */
main {
  grid-area: content;
}

/* changed from .footer, which is a _child_ of footer */
footer {
  grid-area: footer;
}

在此处更正了代码笔：https://codepen.io/c_bergh/pen/eYYvOmG

【讨论】：

【解决方案2】：

您已将网格区域分配给 CSS 中的非语义元素。这就是语义元素干扰您的网格的原因——因为它们最终根本不参与您的网格。如果您从非语义结构开始，然后迁移到语义元素，这可能是您错过的一步。

将网格区域分配给您的语义元素允许您删除非语义元素，从而完成此迁移：

html,
body,
.grid-container {
  height: 100%;
  margin: 0;
}

.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 40em 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    " . header . "
    " . content . "
    " . footer . ";
}

header {
  grid-area: header;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
}

<div class="grid-container">
  <header>header</header>
  <main>content</main>
  <footer>footer</footer>
</div>

【讨论】：