Wie kann ich dafür sorgen, dass sich die letzte Zeile in einem CSS-Raster über die gesamte Zeile erstreckt?

Die letzte Zeile im CSS-Raster füllen

Im CSS-Raster besteht eine häufige Herausforderung darin, sicherzustellen, dass Elemente in der letzten Zeile die gesamte Zeile einnehmen Reihe. Ohne die genaue Anzahl der Elemente zu kennen, scheinen Lösungen schwer zu finden.

Verwendung von nth-child und nth-last-of-type

Dies kann durch eine Kombination erreicht werden der CSS-Regeln: nth-child und nth-last-of-type. Diese Regeln zielen auf Elemente basierend auf ihrer Position innerhalb eines bestimmten übergeordneten Elements ab. Mit diesen Regeln ist es möglich, die Ausrichtung und Größe von Elementen in der letzten Zeile anzupassen.

Beispielcode:

Beachten Sie das folgende CSS Code:

.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;
}

Erklärung:

• nth-child(3n-1) und nth-child(3n) zielen auf Elemente basierend auf ihrer Position innerhalb Der Gittercontainer. Diese Regeln werden verwendet, um Elemente in der mittleren und rechten Spalte zu formatieren.
• nth-child(3n-1):nth-last-of-type(1) und nth-child(3n-2):nth -last-of-type(1) zielt gezielt auf das letzte Element in der letzten Zeile und passt seine Ausrichtung und Spannweite an.
• Die Eigenschaft „grid-column“ wird verwendet, um die Spaltenspanne dieser letzten Elemente zu steuern. Stellen Sie sicher, dass sie die gesamte Reihe ausfüllen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass sich die letzte Zeile in einem CSS-Raster über die gesamte Zeile erstreckt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!