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>