Wie zentriere ich Boxen horizontal und richte die letzte Zeile mit dem CSS-Raster links aus?

Letzte Reihe zentrierter Kästchen mithilfe des CSS-Rasters nach links ausrichten

F: Wie kann ich Kästchen horizontal zentrieren, aber die letzte Reihe nach links ausrichten? links?

A: Mithilfe der CSS-Rastereigenschaft ist es möglich, dieses Ausrichtungsszenario ohne manuelle Anpassungen oder zu erreichen Skripting.

Um dies zu erreichen, ändern Sie die folgenden CSS-Eigenschaften:

div {
  /* Add resize property for dynamic width adjustment */
  resize: horizontal;
  /* Add justify-content property to center the boxes horizontally */
  justify-content: center;
}

ul {
  display: grid;
  /* Define the number of columns based on the number of boxes */
  grid-template-columns: repeat(auto-fit, 40px);
  /* Define the height of the boxes */
  grid-auto-rows: 40px;
  /* Add grid-gap property for spacing between boxes */
  grid-gap: 4px;
}

Durch die Angabe von justify-content: center werden die Boxen horizontal innerhalb des Containers zentriert. Die Eigenschaft „display: grid“ richtet die letzte Reihe von Feldern links aus, wie im Rastersystem angegeben.

Die Eigenschaft „resize: horizontal“ ermöglicht eine dynamische Anpassung der Breite des Containers. Wenn sich die Breite ändert, werden die Kästchen automatisch neu angeordnet, damit sie in den verfügbaren Platz passen und gleichzeitig ihre zentrierte Ausrichtung beibehalten.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Boxen horizontal und richte die letzte Zeile mit dem CSS-Raster links aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!