Wie können CSS-Rasterfelder zentriert werden, während die letzte Zeile linksbündig ausgerichtet wird?

Boxen mit CSS-Raster zentrieren und links ausrichten

Viele Benutzer sind auf die Herausforderung gestoßen, Boxen mittig auszurichten und gleichzeitig ihre letzte Zeile am auszurichten links. Standardmäßig haben ul-Elemente oft eine feste Breite, die sich nicht an ihren Inhalt anpasst, was es schwierig macht, sowohl eine Zentrierung als auch eine Linksausrichtung automatisch zu erreichen.

CSS Grid Solution

Um dieses Problem zu beheben, kann CSS Grid verwendet werden. Durch die Implementierung der folgenden CSS-Eigenschaften können Sie Boxen zentrieren und gleichzeitig ihre letzte Zeile linksbündig ausrichten:

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* Width of elements */
  grid-auto-rows: 40px; /* Height of elements */
  grid-gap: 4px;
  justify-content: center; /* Centers boxes */
}

ul li {
  background-color: wheat;
}

HTML-Code

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Erklärung

Die Eigenschaften „grid-template-columns“ und „grid-auto-rows“ definieren die Anzahl der Spalten und Zeilen im Netz. Die Eigenschaft „grid-gap“ legt den Abstand zwischen den Elementen fest. Der Schlüssel zum Zentrieren und Linksausrichten ist die Eigenschaft „justify-content“. Bei der Einstellung „Mitte“ werden die Rasterelemente in der horizontalen Mitte ihres verfügbaren Platzes im übergeordneten Container positioniert. Dadurch wird sichergestellt, dass die Kästchen zentriert sind und die letzte Reihe am Ende des Rasters linksbündig ausgerichtet ist.

Das obige ist der detaillierte Inhalt vonWie können CSS-Rasterfelder zentriert werden, während die letzte Zeile linksbündig ausgerichtet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!