CSS-Raster: Wie kann ich die maximale Anzahl von Spalten responsiv begrenzen?

CSS-Raster: Beibehalten einer maximalen Anzahl von Spalten ohne Medienabfragen

Frage:

Ist es möglich, ein CSS-Raster mit einer maximalen Anzahl von Spalten zu definieren und dabei zuzulassen, dass Elemente entsprechend der Bildschirmbreite automatisch in neue Zeilen umgebrochen werden? Änderungen?

Lösung:

Mit CSS Grid können Sie die Anzahl der Spalten durch die Wiederholung begrenzen(autofill, minmax(max(width, 100%/ N), 1fr)) Syntax. Dabei steht N für die gewünschte maximale Spaltenanzahl. Wenn die Breite des Gittercontainers zunimmt, stellt der 100 %/N-Teil der Berechnung sicher, dass die Breite pro Spalte diesen Grenzwert niemals überschreitet.

Beispiel:

Bedenken Sie das folgende Code-Snippet:

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

.grid-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

In diesem Beispiel ist die benutzerdefinierte Eigenschaft --n auf 4 gesetzt und definiert ein Maximum von 4 Spalten. Wenn sich die Breite des Containers ändert, werden Elemente automatisch in neue Zeilen umgebrochen, während die angegebene Spaltenbeschränkung beibehalten wird.

Diese Lösung bietet ein flexibles und reaktionsfähiges Rasterlayout, ohne auf Medienabfragen oder JavaScript angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonCSS-Raster: Wie kann ich die maximale Anzahl von Spalten responsiv begrenzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!