在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>

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>

Answer 2

你应该改变.mainnav { grid-column: 1 / 2; }

到.mainnav { grid-column: 1 / 3; }。

您也可以更改为.mainnav { grid-column: 1 / span 2; }

您正在指定网格线号，而不是 中的列号grid-column。来自网格完整指南：

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>