CSS Grid：如何跨越父元素宽度的网格单元格？答案

【问题标题】：CSS Grid: How to span a grid cell across the parent element width?CSS Grid：如何跨越父元素宽度的网格单元格？
【发布时间】：2020-08-16 02:14:42
【问题描述】：

CSS Grid：如何跨越父元素宽度的网格单元格？

在以下 CSS 代码中，#nav { } 不会使#nav 元素水平跨越整个父元素宽度。如果#nav 元素包含更多内容，它似乎会跨越整个父元素宽度。有没有办法让这个元素跨越整个屏幕，同时只使用下面 html 中的内容？

任何帮助将不胜感激。

CSS：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.body  {
  display: grid;
  grid-template-rows: fr, fr, fr, fr, fr;
  grid-template-columns: fr, fr;

  grid-template-areas:
  "header header"
  "nav nav"
  "main details"
  "about aside"
  "footer footer";

  color: white;
  background-color: hsl(0, 100%, 28%);
  font-family: verdana, sans-serif;
}

@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}

#planb {
  background-color: grey;
}

#header {
  display: flex;
  flex-direction: row;
  grid-area: header;
  justify-content: space-evenly;
  color: gold;
}

#nav {
  display: flex;
  flex-direction: row;
  grid-area: nav;
  justify-content: space-evenly;
  list-style-type: none;
  background-color: black;
}

#main {
  grid-area: main;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-bottom: 5%;
  color: gold;
  border: solid 1px;

}

#details {
  grid-area: details;
  margin-right: 10%;
  margin-left: 10%;

}

#about {
  grid-area: about;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#aside {
  grid-area: aside;
  margin-top: 5%;
  margin-left: 10%;
  padding-top: 1.7%;
}

#footer{
  grid-area: footer;
  margin-top: 5%;
  margin-left: 10%;
}

li {
  padding-right: 1 rem;
}

th {
  text-align: left;
}

td {
  text-align: right;
  color: white;
}

dt {
  font-weight: bold;
}

a:link, a:visited {
  color: gold;
}

a:focus, a:hover, a:active {
  color: grey;
}

#header, #nav, #main, #details, #about, #aside {
  border: solid 1px;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="body">
  <header id="header">
    <p>this is the header</p>
  </header>
  <nav>
    <ul id="nav">
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="main">
    <main>
      <table>
        <tr>
          <th><p>this is the table</p></th>
        </tr>
      </table>
    </main>
  </section>
  <section id="details">
    <p>this is the details</p>
  </section>
  <section id="about">
    <p>this is the about</p>
  </section>
  <aside id="aside">
    <p>this is the aside</p>
  </aside>
  <footer id="footer">
    <p>this is the footer</p>
  </footer>
</body>
</html>

【问题讨论】：

标签： css css-grid

【解决方案1】：

解决方案：

将 id 属性 id="nav" 从 <ul> 元素移动到 <nav> 元素。

CSS：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.body  {
  display: grid;
  grid-template-rows: fr, fr, fr, fr, fr;
  grid-template-columns: fr, fr;

  grid-template-areas:
  "header header"
  "nav nav"
  "main details"
  "about aside"
  "footer footer";

  color: white;
  background-color: hsl(0, 100%, 28%);
  font-family: verdana, sans-serif;
}

@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}

#planb {
  background-color: grey;
}

#header {
  display: flex;
  flex-direction: row;
  grid-area: header;
  justify-content: space-evenly;
  color: gold;
}

#nav {
  grid-area: nav;
  color: gold;
  background-color: black;
}

#nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  color: gold;
}

#main {
  grid-area: main;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-bottom: 5%;
  color: gold;
  border: solid 1px;

}

#details {
  grid-area: details;
  margin-right: 10%;
  margin-left: 10%;

}

#about {
  grid-area: about;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#aside {
  grid-area: aside;
  margin-top: 5%;
  margin-left: 10%;
}

#footer{
  grid-area: footer;
  margin-top: 5%;
  margin-left: 10%;
}

#header, #nav, #main, #details, #about, #aside, #footer {
  border: solid 1px;
  height: 100%;
  width: 100%
}

th {
  text-align: left;
}

td {
  text-align: right;
  color: white;
}

dt {
  font-weight: bold;
}

a:link, a:visited {
  color: gold;
}

a:focus, a:hover, a:active {
  color: grey;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="body">
  <header id="header">
    <p>this is the header</p>
  </header>
  <nav id="nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="main">
    <main>
      <table>
        <tr>
          <th><p>this is the table</p></th>
        </tr>
      </table>
    </main>
  </section>
  <section id="details">
    <p>this is the details</p>
  </section>
  <section id="about">
    <p>this is the about</p>
  </section>
  <aside id="aside">
    <p>this is the aside</p>
  </aside>
  <footer id="footer">
    <p>this is the footer</p>
  </footer>
</body>
</html>

【讨论】：