主页 / 问题 / 929778
Accepted
Инквизитор
Asked:2020-01-09 01:06:43 +0000 UTC2020-01-09 01:06:43 +0000 UTC

CSS 网格中的空单元格由 grid-template-areas 属性异常设置

  • 772

我根据备忘单制作了一个 CSS 网格：https ://tuhub.ru/posts/css-grid-complete-guide#prop-grid-template-areas

那里写着：

网格模板区域

...

一个点表示一个空单元格。

并给出了一个例子：

grid-template-areas: 
"header header header header"
"main main . sidebar"
"footer footer footer footer";

这会产生一个正常的结果（一个空单元格在中间的某个地方）。

我正在尝试进行类似的构造，但有两个位于网格边缘的空单元格：

https://codepen.io/anon/pen/zyLOqz

div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headerBg1 header headerBg2"
                       ". mainContent ."
                       "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header { grid-area: header; }
.headerBg.1 { grid-area: headerBg1; }
.headerBg.2 { grid-area: headerBg2; }
.mainContent { grid-area: mainContent; }
.footer { grid-area: footer; }
.footerBg.1 { grid-area: footerBg1; }
.footerBg.2 { grid-area: footerBg2; }
<div class="headerBg 1">Left header</div>
<div class="headerBg 2">Right header</div>
<div class="header">
  Header
</div>
<div class="mainContent">

  Main content<br/> Main content<br/> Main content
</div>
<div class="footerBg 1">Left footer</div>
<div class="footerBg 2">Right footer</div>
<div class="footer">
  Footer
</div>

这里的关键是：

grid-template-areas: 
    "headerBg1 header headerBg2"
    ". mainContent ."
    "footerBg1 footer footerBg2";

问题：为什么左页脚 ( footerBg1) 和右页脚 ( footerBg2) 块应该有空单元格？预计它们将与footer.

html

2 个回答

  1. Best Answer

    这是它应该如何工作的： 

    div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1024px auto;
  grid-template-areas:
    "headerBg1 header headerBg2"
    ". mainContent ."
    "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header {
  grid-area: header;
}

.headerBg1 {
  grid-area: headerBg1;
}

.headerBg2 {
  grid-area: headerBg2;
}

.mainContent {
  grid-area: mainContent;
}

.footer {
  grid-area: footer;
}

.footerBg1 {
  grid-area: footerBg1;
}

.footerBg2 {
  grid-area: footerBg2;
}
    <div class="headerBg1">Left header</div>
<div class="headerBg2">Right header</div>
<div class="header">Header</div>
<div class="mainContent">
  Main content<br> Main content<br> Main content
</div>
<div class="footerBg1">Left footer</div>
<div class="footerBg2">Right footer</div>
<div class="footer">Footer</div>

    • 4

  2. 不，问题完全不同：

    <div class="footerBg 1">Left footer</div>

    .footerBg.1 {grid-area: footerBg1;}

    CSS 不允许以数字开头的类命名。

    我建议只取并重命名。

    原则上，这可以通过属性选择器绕过：

    .footerBg[class~="1"] {grid-area: footerBg1;}

    或使用带有转义的hack（它在chrome中对我有用）：

    .footerBg.\31 {grid-area: footerBg1;}

    顺便说一句，对于标题的部分，同样的错误，但它们纯粹是偶然地落入到位。

    div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headerBg1 header headerBg2"
                       ". mainContent ."
                       "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header { grid-area: header; }
.headerBg.h1 { grid-area: headerBg1; }
.headerBg.h2 { grid-area: headerBg2; }
.mainContent { grid-area: mainContent; }
.footer { grid-area: footer; }
.footerBg.\31 { grid-area: footerBg1; }
.footerBg[class~="2"] { grid-area: footerBg2; }
    <div class="headerBg h1">Left header</div>
<div class="headerBg h2">Right header</div>
<div class="header">
  Header
</div>
<div class="mainContent">

  Main content<br/> Main content<br/> Main content
</div>
<div class="footerBg 1">Left footer</div>
<div class="footerBg 2">Right footer</div>
<div class="footer">
  Footer
</div>

    • 1

相关问题