Question

我一直无法让我的导航栏完全延伸到我的列，尽管事实上我已经指定了我希望导航器延伸到哪些列，如果你可以查看我的代码并指出我的错误，这将是很棒的。

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

Web-Example

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

这称为line-based placement，它定义了列的边界线。

在这种情况下，您告诉网格项从网格列第1行延伸到网格列第2行。这涵盖了一列。

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

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

请记住，在双列网格中，有三个网格列线。

实际上，在每个网格中，列/行的数量等于列数/行数+ 1，因为最后一列/行有一条额外的（最终）行。

Firefox为查看此内容提供了一个有用的工具。

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

enter image description here

此处有更多详情：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>

Answer 2

您应该更改.mainnav { grid-column: 1 / 2; }

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

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

您在grid-column中指定了网格线编号，而不是列编号。来自A Complete Guide to 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>

Answer 3

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

在CSS Grid中的所有列上进行行拉伸

3 个答案: