html - 我的网格列开始和结束不起作用，无法解决

Question

我在#jedan 主 div 中有一堆 div 元素。出于某种原因，即使我使用了 grid-column-start 和 end，我标记为网格框 1 的第一个孩子也不会延伸到接下来的 3 个框；

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  background: #333;
}
#jedan {
  background: #4caaaa;
  color: #333;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, auto);
}

.a2 {
  border: solid 1px black;

  padding: 40px;
}
#jedan:first-child {
  grid-column-start: 1;
  grid-column-end: 4;
}

    <div id="jedan">
      <div class="q, a2">1</div>
      <div class="b, a2">2</div>
      <div class="x, a2">3</div>
      <div class="a, a2">4</div>
      <div class="f, a2">4</div>
      <div class="as, a2">4</div>
      <div class="aa, a2">4</div>
      <div class="asd, a2">4</div>
      <div class="dsa, a2">4</div>
      <div class="vcs, a2">4</div>
      <div class="fcx, a2">4</div>
      <div class="bc, a2">4</div>
      <div class="sada, a2">4</div>
    </div>

标签： htmlcsscss-grid

Answer 1

你刚才打错字了。您必须在 ID 标识符后设置空格，然后写入 :first-child。此外，网格柱端应该是 5，因为它是它的结束位置。

   #jedan :first-child {
      grid-column-start: 1;
      grid-column-end: 5;
    }

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  background: #333;
}
#jedan {
  background: #4caaaa;
  color: #333;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, auto);
}

.a2 {
  border: solid 1px black;

  padding: 40px;
}
#jedan :first-child {
  grid-column-start: 1;
  grid-column-end: 5;
}

    <div id="jedan">
      <div class="q, a2">1</div>
      <div class="b, a2">2</div>
      <div class="x, a2">3</div>
      <div class="a, a2">4</div>
      <div class="f, a2">4</div>
      <div class="as, a2">4</div>
      <div class="aa, a2">4</div>
      <div class="asd, a2">4</div>
      <div class="dsa, a2">4</div>
      <div class="vcs, a2">4</div>
      <div class="fcx, a2">4</div>
      <div class="bc, a2">4</div>
      <div class="sada, a2">4</div>
    </div>