CSS Grid:列放置到下一行的项

Question

我试图实现一个网格显示位置，名称，演变和得分的用户。

这个列表是动态的，意思是--我不知道在末尾有多少行。

另一个限制因素是，I不能更改中元素的顺序。

正如您在下面的片段中所看到的，当我按列编号放置项时，.name 会转到下一行，而不是停留在当前的上，我不知道为什么.

​

body {
  background-color: darkslategrey;
  color: white;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  text-align: center;
}

.name,
.evolution,
.score {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.position {
  grid-column: 1 / span 3;
}

.name {
  grid-column: 1;
}

.evolution {
  grid-column: 2;
}

.score {
  grid-column: 3;
}

<div class="container">
  <div class="position">1st</div>
  <div class="evolution">+2</div>
  <div class="score">85pts</div>
  <div class="name">Jack</div>
  <div class="position">2nd</div>
  <div class="evolution">+3</div>
  <div class="score">82pts</div>
  <div class="name">Kate</div>
  <div class="position">3rd</div>
  <div class="evolution">-2</div>
  <div class="score">80pts</div>
  <div class="name">Sawyer</div>
  <!-- and many more, this list is dynamic -->
</div>

​

我在这里错过了什么？

Answer 1

网格正在按您给它HTML元素的顺序填充

但如果可以的话，你希望它能填满所有的空余空间。CSS具有网格-自动流属性，这将使这种情况发生。例如，它会发现第二行的空单元格并将杰克放入其中。

​

body {
  background-color: darkslategrey;
  color: white;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-flow: dense;
  gap: 10px;
  text-align: center;
}

.name,
.evolution,
.score {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.position {
  grid-column: 1 / span 3;
}

.name {
  grid-column: 1;
}

.evolution {
  grid-column: 2;
}

.score {
  grid-column: 3;
}

<div class="container">
  <div class="position">1st</div>
  <div class="evolution">+2</div>
  <div class="score">85pts</div>
  <div class="name">Jack</div>
  <div class="position">2nd</div>
  <div class="evolution">+3</div>
  <div class="score">82pts</div>
  <div class="name">Kate</div>
  <div class="position">3rd</div>
  <div class="evolution">-2</div>
  <div class="score">80pts</div>
  <div class="name">Sawyer</div>
  <!-- and many more, this list is dynamic -->
</div>

​