html - 使行延伸到 CSS 网格中的所有列

Question

尽管我已经指定了我希望导航延伸到哪些列，但我一直无法让我的导航完全延伸到我的列中，如果你可以看看我的代码并指出我的非常棒的错误。

这是浏览器中 HTML 文件的图像

body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
  background-color: #5eccc0;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navli {
  float: left;
  text-align: center;
}

.navli a {
  display: block;
  text-decoration: none;
}

main {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
  background-color: #ffff77;
}

.sidebar {
  background-color: #b200a4;
  grid-column: 2 / 2;
  grid-row: 2 / 2;
}

<div class="container">
  <nav class="mainnav">
    <ul class="navul">
      <li class="navli"><a href="index.html">Home</a></li>
      <li class="navli"><a href="contact.html">Contact</a></li>
      <li class="navli"><a href="about.html">About</a></li>
    </ul>
  </nav>

  <main>
    <h1>Html Example Header</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
      eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
      <br>
      <br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
      ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
      <br>
      <br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
      massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
    </p>
  </main>
  <div class="sidebar">
    <h2>Sidebar Example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

Answer 1

I've been having trouble getting my nav to stretch across my columns completely, despite the fact that I've specified what columns I wanted the nav to stretch over, if you could take a look at my code and point out my error that would be awesome.

实际上，您没有指定希望导航覆盖的列。

您已指定列行。

---

当您告诉网格项执行以下操作时:

grid-column: 1 / 2

分解为:

grid-column-start: 1
grid-column-end: 2

这叫做 line-based placement它定义了列的边界线。

在这种情况下，您要让网格项从网格列第 1 行延伸到网格列第 2 行。它覆盖一列。

除了在您的网格中，还有两列。

.container {
  display: grid;
  grid-template-columns: 4fr 1fr;
}

请记住，在两列网格中，存在三个网格列线。

事实上，在每个网格中，列/行线的数量等于列/行数 + 1，因为最后一列/行有一个额外的(最终)线。

Firefox 提供了一个有用的工具来查看这一点。

在 Firefox 开发工具中，当您检查网格容器时，CSS 声明中有一个微小的网格图标。单击它会显示网格的轮廓。

此处有更多详细信息:https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

---

有几种方法可以解决这个问题。

一种方法是调整您的 grid-column 规则:

grid-column: 1 / 2

到

grid-column: 1 / 3

但是，when working with explicit grids ，你也可以这样做:

grid-column: 1 / -1

正整数从网格的开头开始计数。

负整数从网格末尾开始计数 (source)。

body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;       /* adjustment (was 1 / 2) */
  grid-row: 1 / 2;           /* adjustment (was 1 / 1) */
  background-color: #5eccc0;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navli {
  float: left;
  text-align: center;
}

.navli a {
  display: block;
  text-decoration: none;
}

main {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
  background-color: #ffff77;
}

.sidebar {
  background-color: #b200a4;
  grid-column: 2 / 2;
  grid-row: 2 / 2;
}

<div class="container">
  <nav class="mainnav">
    <ul class="navul">
      <li class="navli"><a href="index.html">Home</a></li>
      <li class="navli"><a href="contact.html">Contact</a></li>
      <li class="navli"><a href="about.html">About</a></li>
    </ul>
  </nav>

  <main>
    <h1>Html Example Header</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
      eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
      <br>
      <br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
      ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
      <br>
      <br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
      massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
    </p>
  </main>
  <div class="sidebar">
    <h2>Sidebar Example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

---