Что такое начальный столбец по умолчанию для элементов CSS-сетки?

Question

У меня есть это просто grid div:

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  background-color: red;
}

#item5 {
  background-color: aqua;
}

<div id="grid">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>

Почему мои предметы пропускают первый столбец и помещаются во второй?

Answer 1

У вас есть "   " символов () перед каждым из ваших внутренних <div> элементов, которые интерпретируются как дополнительные новые строки и влияют на макет вашей сетки.Замена их обычными пробелами устраняет проблему:

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  background-color: red;
}

#item5 {
  background-color: aqua;
}

<div id="grid">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>