Wie verteile ich Elemente in der letzten Zeile eines CSS-Rasters gleichmäßig?

CSS-Raster: Elemente in der letzten Zeile gleichmäßig verteilen

Bei unseren Webdesign-Bemühungen besteht häufig die Notwendigkeit, Elemente innerhalb eines Rasters gleichmäßig zu verteilen Anordnung, insbesondere in der letzten Reihe. Diese Aufgabe lässt sich leicht mit der kombinierten Leistungsfähigkeit von Regeln für das n-te Kind und den Regeln für den n-letzten Typ lösen. Voraussetzung für diese Methode ist jedoch, dass Sie die Anzahl der Spalten in Ihrem Raster kennen.

Beachten Sie das folgende Markup:

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

Und diese begleitenden CSS-Regeln:

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

In diesem Beispiel wird ein Raster mit drei Spalten definiert und wir geben die Verteilung und den Stil der Elemente innerhalb der letzten Zeile mithilfe von nth-child und nth-last-of-type an. Die Ränder werden hinzugefügt, um den visuellen Effekt zu veranschaulichen.

Die auf nth-child(3n-1):nth-last-of-type(1) oder nth-child(3n-2) angewendeten CSS-Regeln: nth-last-of-type(1) stellt sicher, dass die letzten Elemente in der zweiten und dritten Spalte zwei bzw. drei Spalten umfassen und ästhetisch den verbleibenden Platz in der Zeile einnehmen.

Das obige ist der detaillierte Inhalt vonWie verteile ich Elemente in der letzten Zeile eines CSS-Rasters gleichmäßig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!