Wie kann ich dafür sorgen, dass die letzte Zeile mit Elementen den verbleibenden Platz im CSS-Grid einnimmt?

Question

Gibt es eine Möglichkeit, alle Elemente in der letzten Zeile des Rasters dazu zu zwingen, diese Zeile zu füllen, egal wie viele sie haben?

Ich kenne die Anzahl der Elemente im Raster nicht, daher kann ich sie nicht direkt positionieren. Ich habe es mit grid-auto-flow:ensemble versucht, aber es hat nicht wirklich geholfen.

Dies ist eine Visualisierung meines Problems: :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

Answer 1

通过结合 CSS 规则 nth-child 和 nth-last-of type，这对于 CSS 网格来说是完全可能的。唯一需要注意的是，需要提前知道列数。

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>