Wie erstelle ich ein Mauerwerksraster mit CSS-Rasterlayout?

Erstellen Sie ein Mauerwerksraster mit CSS-Rasterlayout

Ein reaktionsfähiges Rasterlayout zu erreichen, bei dem Elemente variable Höhen, aber dieselbe Breite haben, kann bei der Verwendung eine Herausforderung sein Flexbox oder Schwimmer. Erwägen Sie stattdessen die Verwendung des leistungsstarken Moduls CSS Grid Layout.

CSS Grid Layout bietet eine flexible und effiziente Lösung zum Erstellen komplexer Rasterlayouts:

1. Anzeige: Stellen Sie das Containerelement auf display: Grid ein, um anzuzeigen, dass es sich um ein Raster handelt Container.
2. Grid Auto-Rows: Geben Sie die konsistente Höhe für die Grid-Zeilen mithilfe von Grid-Auto-Rows an: 50px. Dadurch wird die Standardhöhe für jede Zeile festgelegt.
3. Rasterlücke:Abstand zwischen Rasterelementen mit Rasterlücke hinzufügen: 10 Pixel.
4. Rastervorlagenspalten: Definieren Sie das Spaltenlayout mithilfe von Grid-Template-Columns: Repeat(Autofill, Minmax(30%, 1fr)). Dadurch wird ein Raster mit Spalten von mindestens 30 % Breite erstellt, das den verbleibenden Platz gleichmäßig ausfüllt.
5. Zeilenübergreifend: Verwenden Sie die Eigenschaft „grid-row“ für einzelne Rasterelemente, um zu steuern, wie viele Zeilen sie haben Spanne. Beispielsweise umfasst [groß] zwei Zeilen, während [größte] vier Zeilen umfasst.

HTML-Beispiel:

<grid-container>
  <grid-item short></grid-item>
  <!-- ... more grid items -->
</grid-container>

CSS-Beispiel:

grid-container {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

[short] {
  grid-row: span 1;
  background-color: green;
}

/* ... more grid item styles */

Durch die Anwendung dieser CSS-Regeln können Sie ein mauerwerkähnliches Rastersystem mit Elementen erreichen Passen Sie ihre Höhen dynamisch an und sorgen Sie so für ein ausgewogenes und reaktionsfähiges Layout.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Mauerwerksraster mit CSS-Rasterlayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!