Heim > Web-Frontend > CSS-Tutorial > CSS: Mauerwerkslayout

CSS: Mauerwerkslayout

Barbara Streisand
Freigeben: 2024-11-07 16:06:03
Original
687 Leute haben es durchsucht

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:

CSS: masonry layout

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%;
  }
}
Nach dem Login kopieren

CSS: masonry layout

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;
  }
}
Nach dem Login kopieren

CSS: masonry layout

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;
  }
}
Nach dem Login kopieren

CSS: masonry layout

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;
  ...
  ...
}
Nach dem Login kopieren

CSS: masonry layout

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.

CSS: masonry layout

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage