在CSS Grid中让行跨越所有列

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>

- S. Schultz

Answer 1

我一直在努力让我的导航栏完全跨越我的列，尽管我已经指定了我希望导航栏跨越的列，如果您可以查看我的代码并指出我的错误，那将是太棒了。

实际上，您没有指定您希望导航栏跨越的列。

您已经指定了列线。

---

当您告诉一个网格项执行以下操作时：

grid-column: 1 / 2

这可以分解为以下内容：

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

这被称为基于行的布局，它为列定义了边界线。

在这种情况下，您告诉网格项从网格列线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

但是，在使用显式网格时, 你也可以这样做：

grid-column: 1 / -1

正整数从网格的起点开始计数。

负整数从网格的末尾开始计数（源）。

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>

---

- Michael Benjamin

---

"grid-column: 1 / -1" 是我所需要的。谢谢！" - dekisha

Answer 2

你应该将 .mainnav { grid-column: 1 / 2; } 改为 .mainnav { grid-column: 1 / 3; }。

另外你也可以改为 .mainnav { grid-column: 1 / span 2; }。

在 grid-column 中，你指定的是网格线编号，而不是列编号。来自《完整的 Grid 指南》：

grid-column: <start-line> / <end-line> | <start-line> / span <value>;

演示：

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 / 3; /* or grid-column: 1 / span 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>

- Vadim Ovchinnikov

Answer 3

.mainnav {
  grid-column: 1 / -1;
}

- Ecaterina Moraru