时间戳

首页 > 解决方案 > CSS 网格和语义 HTML

html - CSS 网格和语义 HTML

问题描述

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

https://codepen.io/oscarryz/pen/oNNBKyd

所以基本上我将网格设置为 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 中可以看出，这是行不通的。如果我删除它有效的语义标签，显然必须有正确的方法来做到这一点

标签： htmlcsscss-gridsemantic-markup

解决方案

Grid templates are for direct descendants.

The semantic elements should be referenced by tagname, not class:

/* 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;
}

Corrected codepen here: https://codepen.io/c_bergh/pen/eYYvOmG

推荐阅读