Question

我当时正在使用grid属性来构建网站。但是我遇到一个问题，我无法按预期使用背景属性。

#wrap {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 35px 125px;
}

.line1 {
  width: 1px;
  height: 16px;
  background: #ccc;
}

header {
  background-color: #221816;
  grid-column: 2/12;
}

header .topNav {
  color: #fff;
}

header .topNav ul {
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

header .topNav ul li {
  align-self: center;
  padding-right: 16px;
}

*,
 :before,
 :after {
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  list-style: none;
}

<div id="wrap">
  <header>
    <nav class="topNav">
      <ul>
        <li><a href="#">login</a></li><span class="line1"></span>
        <li><a href="#">signin</a></li>
        <li><a href="#">bags</a></li>
        <li>mypages<span></span></li>
        <li>customer</li>
      </ul>
    </nav>
  </header>
</div>

我希望标题的宽度为100％。所以我把'grid-column：1 / -1;'我有一个问题，内容必须狭窄。所以我修复了诸如'grid-column：2/12'之类的属性，那么现在我遇到了一个问题，即背景不能宽。我有解决方案吗？

Answer 1

将标题更改为：libs/**

这就是为什么：您在页面的宽度上有12个分区，但没有按分区计算面积，而是按行计算。

拿一张草稿纸，画三行从一侧到另一侧，然后从顶部到底部有13行代表标题/导航区域的12列和2行。现在，跨过的三行编号为1、2和3（一在顶部，两在中间，三在底部）。 13条垂直线从第1行开始，如果从第13行开始一直到最后，那么，要使标题从页面的一侧到另一侧，它就必须从第1行开始，然后在第13行（1/13）结束。这有道理吗？

Answer 2

如果我正确理解了您要做什么，那么您将花费更少的精力就可以得到想要的东西，如下所示。只需使用flex进行此行。您不需要使用网格。

在我写下这个答案之后，您随后的评论说，您想要做一些您没有给我们看过的事情，其中有些行与此行有所不同。您可以按照我为该行显示的方式进行操作，然后添加另一个带有网格的div并执行您想要的操作。

如果这对您不起作用，那么您需要进一步阐明您要做什么。

.line1 {
  width: 1px;
  height: 100%;
  background: #ccc;
}

header {
  background-color: #221816;
}

header .topNav {
  color: #fff;
}

header .topNav ul {
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

header .topNav ul li {
  padding: 0 2%;
  align-self: center;
}

*,
 :before,
 :after {
  margin: 0;
  padding: 0;
  color: #fff;
  list-style: none;
}

<div id="wrap">
  <header>
    <nav class="topNav">
      <ul>
        <li><a href="#">login</a></li><span class="line1"></span>
        <li><a href="#">signin</a></li>
        <li><a href="#">bags</a></li>
        <li>mypages<span></span></li>
        <li>customer</li>
      </ul>
    </nav>
  </header>
</div>

CSS网格块如何具有背景色？

2 个答案: