Question

我有一个使用CSS Grid创建的布局。我的body元素具有与网格的实际部分不同的背景颜色。我想通过我使用margin在网格中创建的“排水沟”来显示这种颜色。我把这个问题联系在一起：

body {
  background: #f00;
  margin: 0;
}

#page {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "header header" "navigation content" "footer footer";
  grid-template-columns: 200px auto;
  grid-template-rows: 15% 75% 10%;
  background: #fff;
}

#page>* {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

#page>header {
  grid-area: header;
}

#page>nav {
  grid-area: navigation;
}

#page>main {
  grid-area: content;
}

#page>footer {
  grid-area: footer;
}

<section id="page">
  <header>
    <h1>Header</h1>
  </header>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <main>
    <h1>Content</h1>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>
</section>

Fiddle

Answer 1

您也可以使用Outline属性实现此目的：

#page > * {
    border: 1px solid #000;
    padding: 10px;
    outline: 5px solid #f00;
    margin: 5px;
}

Answer 2

您将#page部分的整个背景设为白色。要获得红色表演，白色只需要应用于#page的孩子的内部。将background样式从#page移至#page > *，如下所示：

#page {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "header header"
                       "navigation content"
                       "footer footer";
  grid-template-columns: 200px auto;
  grid-template-rows: 15% 75% 10%;
}

#page > * {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
  background: #fff;
}

在CSS Grid中没有通过排水沟显示的体型

2 个答案: