Wie zentriere ich Boxen mit einer linksbündigen letzten Zeile mithilfe eines CSS-Rasters?

Zentrierte Boxen mit linksbündiger letzter Zeile

Beim Umgang mit einer dynamischen Liste von Elementen kann es schwierig sein, ein zentriertes Layout zu erreichen und gleichzeitig die letzte Zeile auszurichten der Elemente auf der linken Seite. Während text-align: center Elemente innerhalb ihres Containers horizontal ausrichtet, berücksichtigt es nicht die Breite des Containers.

Lösung des Problems

CSS Grid bietet eine Lösung für dieses Problem:

div {
  display: grid;
  justify-content: center;
}

• display: Grid wandelt den Container in ein Rasterlayout um.
• justify-content: horizontal zentrieren den Inhalt des Rasters.

Um jedoch sicherzustellen, dass die letzte Zeile der Elemente links ausgerichtet ist, müssen wir die Anzahl der Spalten im Raster mithilfe von „grid-template-columns“ angeben:

ul {
  grid-template-columns: repeat(auto-fit, 40px);
}

• repeat(auto-fit, 40px) erstellt so viele Spalten wie nötig, um in den Inhalt zu passen, jede mit einer Breite von 40px.

Beispiel:

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

Bei dieser Lösung bleiben die Boxen horizontal zentriert, während die letzte Zeile unabhängig von der Zahl linksbündig ausgerichtet wird der Elemente in der Liste.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Boxen mit einer linksbündigen letzten Zeile mithilfe eines CSS-Rasters?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!