Как блок сетки CSS имеет цвет фона?

Question

Я использовал свойство сетки для создания веб-сайта.но у меня проблема, что я не могу использовать фоновое свойство, как я ожидаю.

#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

Если я правильно понимаю, что вы пытаетесь сделать, вы можете получить то, что хотите, с гораздо меньшими усилиями, как я показал ниже.Просто сделайте этот ряд с 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>

Answer 2

измените свой заголовок следующим образом: header{background-color:#221816; grid-column: 1/13;}

Вот почему: у вас есть 12 делений по ширине страницы, но вы не учитываете область по подразделениям, вы считаете по строке.

Возьмите лист бумаги, нарисуйте три линии из стороны в сторону, затем 13 линий сверху вниз, чтобы представить 12 столбцов и 2 строки заголовка / области навигации.Теперь эти три линии пронумерованы 1, 2 и 3 (одна сверху, две посередине, три снизу).13 строк вертикали начинаются со строки номер один, и если вы посчитаете весь конец до конца строки номер 13. Итак, чтобы ваш заголовок перемещался с одной стороны страницы на другую, он должен начинаться со строки 1 иконец строки 13 (1/13).Имеет ли это смысл?