Nur CSS-Mauerwerkslayout

Ich muss ein ziemlich gewöhnliches Mauerwerkslayout implementieren. Aus einer Reihe von Gründen möchte ich jedoch kein JavaScript verwenden, um dies zu tun.

Parameter:

• Alle Elemente haben die gleiche Breite
• Elemente haben eine Höhe, die serverseitig nicht berechnet werden kann (ein Bild plus verschiedene Textmengen)
• Ich kann mit einer festen Anzahl von Spalten leben, wenn ich muss

Es gibt eine triviale Lösung dafür, die in modernen Browsern funktioniert, die column-countEigenschaft.

Das Problem bei dieser Lösung ist, dass die Elemente in Spalten angeordnet sind:

Während ich die Elemente in Reihen anordnen muss, zumindest ungefähr:

Ansätze, die ich ausprobiert habe und die nicht funktionieren:

• Gegenstände herstellen display: inline-block: Verschwendet vertikalen Raum.
• Gegenstände herstellen float: left: lol, nein.

Jetzt könnte ich das serverseitige Rendering ändern und die Elemente neu ordnen, indem ich die Anzahl der Elemente durch die Anzahl der Spalten dividiere. Dies ist jedoch kompliziert und fehleranfällig (basierend darauf, wie Browser die Elementliste in Spalten aufteilen) um es wenn möglich zu vermeiden.

Gibt es eine neue Flexbox-Magie, die dies ermöglicht?

Flexbox

Ein dynamisches Mauerwerkslayout ist mit flexbox nicht möglich, zumindest nicht sauber und effizient.

Flexbox ist ein eindimensionales Layoutsystem. Dies bedeutet, dass Elemente entlang horizontaler oder vertikaler Linien ausgerichtet werden können. Ein Flex-Element ist auf seine Zeile oder Spalte beschränkt.

Ein echtes Rastersystem ist zweidimensional, dh es kann Elemente entlang horizontaler UND vertikaler Linien ausrichten. Inhaltselemente können sich gleichzeitig über Zeilen und Spalten erstrecken, was Flex-Elemente nicht können.

Aus diesem Grund verfügt die Flexbox nur über eine begrenzte Kapazität zum Aufbau von Gittern. Dies ist auch ein Grund, warum das W3C eine andere CSS3-Technologie entwickelt hat, Grid Layout .

row wrap

In einem Flex-Container mit flex-flow: row wrapmüssen Flex-Elemente in neue Zeilen umbrochen werden .

Dies bedeutet, dass ein Flex-Element nicht unter ein anderes Element in derselben Zeile gewickelt werden kann .

Beachten Sie oben, wie Div # 3 unter Div # 1 umschließt und eine neue Zeile erstellt. Es kann nicht unter div # 2 gewickelt werden .

Wenn die Elemente nicht die höchsten in der Reihe sind, bleibt der Leerraum erhalten, wodurch unschöne Lücken entstehen.

column wrap

Wenn Sie zu wechseln, flex-flow: column wrapist ein gitterartiges Layout besser erreichbar. Ein Container in Säulenrichtung weist jedoch auf Anhieb vier potenzielle Probleme auf:

1. Flex-Elemente fließen vertikal und nicht horizontal (wie in diesem Fall erforderlich).
2. Der Container wird horizontal und nicht vertikal erweitert (wie das Pinterest-Layout).
3. Der Behälter muss eine feste Höhe haben, damit die Gegenstände wissen, wo sie verpackt werden müssen.
4. Zum jetzigen Zeitpunkt weist es einen Mangel in allen gängigen Browsern auf, in denen der Container nicht erweitert werden kann, um zusätzliche Spalten aufzunehmen .

Infolgedessen ist ein Container in Spaltenrichtung in diesem Fall und in vielen anderen Fällen keine Option.

CSS-Raster mit undefinierten Artikelabmessungen

Das Rasterlayout wäre eine perfekte Lösung für Ihr Problem, wenn die verschiedenen Höhen der Inhaltselemente im Voraus festgelegt werden könnten . Alle anderen Anforderungen liegen innerhalb der Kapazität von Grid.

Die Breite und Höhe von Rasterelementen muss bekannt sein, um Lücken mit umgebenden Elementen zu schließen.

Daher ist Grid, das beste CSS-Angebot für den Bau eines horizontal fließenden Mauerwerks, in diesem Fall nicht ausreichend.

Bis eine CSS-Technologie mit der Fähigkeit zum automatischen Schließen der Lücken eintrifft, hat CSS im Allgemeinen keine Lösung. So etwas würde wahrscheinlich ein erneutes Fließen des Dokuments erfordern, daher bin ich mir nicht sicher, wie nützlich oder effizient es sein würde.

Du brauchst ein Skript.

JavaScript-Lösungen verwenden in der Regel die absolute Positionierung, bei der Inhaltselemente aus dem Dokumentfluss entfernt werden, um sie ohne Lücken neu anzuordnen. Hier sind zwei Beispiele:

• Desandro Mauerwerk

  Masonry ist eine JavaScript-Rasterlayoutbibliothek. Es funktioniert, indem Elemente basierend auf dem verfügbaren vertikalen Raum in einer optimalen Position platziert werden, ähnlich wie ein Maurer, der Steine ​​in eine Wand einfügt.

  ^{Quelle: http://masonry.desandro.com/}

• So erstellen Sie eine Website, die wie Pinterest funktioniert

  [Pinterest] ist wirklich eine coole Seite, aber was ich interessant finde, ist, wie diese Pinnwände angeordnet sind ... Der Zweck dieses Tutorials ist es also, diesen reaktionsschnellen Blockeffekt selbst neu zu erstellen ...

  ^{Quelle: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS-Raster mit definierten Artikelabmessungen

Für Layouts, bei denen die Breite und Höhe von Inhaltselementen bekannt sind, finden Sie hier ein horizontal fließendes Mauerwerkslayout in reinem CSS:

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

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

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsFiddle-Demo

Wie es funktioniert

1. Richten Sie einen Rastercontainer auf Blockebene ein. ( inline-gridwäre die andere Option)
2. Die grid-auto-rowsEigenschaft legt die Höhe automatisch generierter Zeilen fest. In diesem Raster ist jede Reihe 50 Pixel groß.
3. Das grid-gapAnwesen ist eine Abkürzung für grid-column-gapund grid-row-gap. Diese Regel legt eine 10-Pixel-Lücke zwischen Rasterelementen fest . (Dies gilt nicht für den Bereich zwischen Elementen und dem Container.)

4. Die grid-template-columnsEigenschaft legt die Breite explizit definierter Spalten fest.

   Die repeatNotation definiert ein Muster sich wiederholender Spalten (oder Zeilen).

   Die auto-fillFunktion weist das Raster an, so viele Spalten (oder Zeilen) wie möglich auszurichten, ohne den Container zu überlaufen. (Dies kann zu einem ähnlichen Verhalten wie bei Flex-Layouts führen flex-wrap: wrap.)

   Die minmax()Funktion legt einen minimalen und maximalen Größenbereich für jede Spalte (oder Zeile) fest. Im obigen Code beträgt die Breite jeder Spalte mindestens 30% des Containers und höchstens den verfügbaren freien Speicherplatz.

   Die frEinheit repräsentiert einen Bruchteil des freien Speicherplatzes im Gittercontainer. Es ist vergleichbar mit der flex-growEigenschaft von Flexbox .

5. Mit grid-rowund spansagen wir den Rasterelementen, über wie viele Zeilen sie sich erstrecken sollen.

Browser-Unterstützung für CSS Grid

• Chrome - volle Unterstützung ab 8. März 2017 (Version 57)
• Firefox - volle Unterstützung ab 6. März 2017 (Version 52)
• Safari - volle Unterstützung ab 26. März 2017 (Version 10.1)
• Edge - volle Unterstützung ab 16. Oktober 2017 (Version 16)
• IE11 - keine Unterstützung für aktuelle Spezifikation; unterstützt veraltete Version

Hier ist das vollständige Bild: http://caniuse.com/#search=grid

Coole Grid-Overlay-Funktion in Firefox

Wenn Sie in Firefox-Entwicklungstools den Rastercontainer überprüfen, befindet sich in der CSS-Deklaration ein winziges Rastersymbol. Beim Klicken wird auf der Seite ein Umriss Ihres Rasters angezeigt.

Weitere Details finden Sie hier: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Dies ist eine kürzlich entdeckte Technik mit Flexbox: https://tobiasahlin.com/blog/masonry-with-css/ .

Der Artikel macht für mich Sinn, aber ich habe nicht versucht, ihn zu verwenden, daher weiß ich nicht, ob es irgendwelche Einschränkungen gibt, die nicht in Michaels Antwort erwähnt sind.

Hier ist ein Beispiel aus dem Artikel, in dem die orderEigenschaft verwendet wird, kombiniert mit:nth-child .

Stapelschnipsel

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>