Wie kann ich dafür sorgen, dass die Elemente der letzten Zeile des CSS-Rasters den verbleibenden Platz ausfüllen?

Abstand der letzten Zeile im CSS-Raster steuern

Herausforderung:

Wie können wir sicherstellen, dass alle Elemente in der letzten Zeile vorhanden sind? eines CSS-Rasters verbrauchen den verbleibenden Platz in der Zeile, unabhängig von ihrer Größe Zahl?

Lösung:

Durch die Nutzung der Leistungsfähigkeit des CSS-Rasters können wir diese räumliche Kontrolle durch eine clevere Kombination aus n-tem Kind und n-letztem-von- erreichen. Typregeln. Der Schlüssel liegt darin, die Anzahl der Spalten im Raster im Voraus zu kennen.

Implementierung:

1. Definieren Sie das Raster mit display: Grid und geben Sie die gewünschte Anzahl an Spalten mit Grid-Template-Columns.
2. Wenden Sie die Eigenschaft „justify-items: start“ an, um Elemente in auszurichten Zeilen.
3. Verwenden Sie *:nth-child(3n-1), um das erste Element in jeder Zeile mit bestimmten Eigenschaften zu formatieren (z. B. Zentrieren des Textes).
4. Verwenden Sie *:nth-child (3n) um das zweite Element in jeder Zeile zu formatieren (z. B. den Text rechtsbündig auszurichten).
5. Kombinieren Sie für das letzte Element in jeder Zeile *:nth-child(3n-1) mit nth-last-of-type(1), um das gewünschte Spanning-Verhalten zu erreichen.
6. Fügen Sie zusätzliche Regeln hinzu, um das Erscheinungsbild der letzten Zeile anzupassen, z. B. die Angabe von Rändern oder Hintergrundfarben.

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

HTML-Beispiel:

<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>

Indem wir die Leistungsfähigkeit dieser CSS-Eigenschaften nutzen, können wir den Abstand von Elementen effektiv steuern die letzte Zeile eines CSS-Rasters, um ein ästhetisch ansprechendes und flexibles Layout zu gewährleisten.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass die Elemente der letzten Zeile des CSS-Rasters den verbleibenden Platz ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!