CSS 网格和语义 HTML
CSS grid and semantic HTML
我正在学习 CSS 网格,在尝试进行布局和使用语义 html 的同时,我 运行 遇到了一些问题
https://codepen.io/oscarryz/pen/oNNBKyd
所以基本上我将网格设置为 3x3,左右为空 space,中间为内容
.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>
从上面的代码笔中可以看出,这是行不通的。如果我remove the semantic tags it works,显然必须有一个正确的方法
您已将网格区域分配给 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>
网格模板适用于直系后代。
语义元素应该由标记名引用,而不是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;
}
我正在学习 CSS 网格,在尝试进行布局和使用语义 html 的同时,我 运行 遇到了一些问题
https://codepen.io/oscarryz/pen/oNNBKyd
所以基本上我将网格设置为 3x3,左右为空 space,中间为内容
.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>
从上面的代码笔中可以看出,这是行不通的。如果我remove the semantic tags it works,显然必须有一个正确的方法
您已将网格区域分配给 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>
网格模板适用于直系后代。
语义元素应该由标记名引用,而不是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;
}