css - 什么是 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>