CSS: Mauerwerkslayout

Was ist ein Mauerwerksplan?

von MDN:

Mauerwerkslayout ist eine Layoutmethode, bei der eine Achse ein typisches strenges Rasterlayout, meist Säulen, und die andere ein Mauerwerkslayout verwendet. Anstatt sich auf der Mauerwerksachse an ein striktes Raster zu halten und nach kürzeren Elementen Lücken zu lassen, steigen die Elemente in der folgenden Reihe nach oben, um die Lücken vollständig zu füllen.

Das Layout von pinterest.com ist ein klassisches Beispiel dafür:

Was können wir aus unserer CSS-Toolbox verwenden?

Netz

Wir verwenden ein einfaches HTML-Markup:

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

Die Reaktionsfähigkeit ist großartig, aber wir haben Lücken unter jedem Bild.

Spaltenanzahl

Als nächstes verwenden Sie die CSS-Containereigenschaft „column-count“.

Die CSS-Eigenschaft „column-count“ unterteilt den Inhalt eines Elements in die angegebene Anzahl von Spalten.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

Nicht gut.
Das aktuelle Layout sieht wie gewünscht aus, die Bilder sind jedoch skaliert und reagieren nicht. Während wir Medienabfragen verwenden könnten, um die Reaktionsfähigkeit zu steuern, streben wir eine robustere Lösung an.

Verwendung von Spalten

Die CSS-Kurzschrifteigenschaft columns legt die Anzahl der Spalten fest, die beim Zeichnen des Inhalts eines Elements verwendet werden sollen, sowie die Breite dieser Spalten.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

Eine einzelne Codezeile. Erstaunlich!

Wie funktioniert das?

Jede Spalte erhält eine Mindestbreite von 250 Pixel. Wenn zusätzlicher Platz über 250 Pixel hinaus vorhanden ist, werden die Spalten erweitert, um den Platz auszufüllen. Wenn der Platz reduziert wird, verringert sich die Anzahl der Spalten entsprechend.

Extras

Wir können die Anzahl der Spalten begrenzen, indem wir das Layout auf maximal X Spalten festlegen:

.photos {
  columns: 250px 2;
  ...
  ...
}

Mit

Spalten
ist nicht nur auf die Gestaltung von Mauerwerksbildern beschränkt. Wir können es auch verwenden, um Textspalten zu formatieren: gleiches CSS, unterschiedlicher Inhalt.

Letzte Gedanken

War das hilfreich?
Was war Ihr Anwendungsfall?

Das obige ist der detaillierte Inhalt vonCSS: Mauerwerkslayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!