Wie erstelle ich eine Raster- / Kachelansicht?

129

Ich habe beispielsweise eine Klasse .article und möchte diese Klasse als Rasteransicht anzeigen. Also habe ich diesen Stil angewendet:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

Dieser Stil lässt den Artikel gekachelt / Gitter aussehen. Es funktioniert gut mit fester Höhe. Aber wenn ich die Höhe auf automatisch einstellen möchte (automatisch entsprechend den darin enthaltenen Daten strecken), sieht das Raster böse aus.

Geben Sie hier die Bildbeschreibung ein

Und ich möchte die Ansicht so machen:

Geben Sie hier die Bildbeschreibung ein

css grid positioning css-float tiles Ariona Rian
quelle

78

Diese Art von Layout wird als Mauerwerkslayout bezeichnet . Mauerwerk ist ein weiteres Rasterlayout, das jedoch die durch die unterschiedliche Höhe der Elemente verursachten Leerzeichen ausfüllt.

jQuery Masonry ist eines der jQuery-Plugins zum Erstellen von Mauerwerkslayouts.

Alternativ können Sie CSS3s verwenden column. Derzeit ist das jQuery-basierte Plugin die beste Wahl, da es Kompatibilitätsprobleme mit der CSS3-Spalte gibt.

Bücherregal
quelle

3

Der CSS3-Weg wurde hinzugefügt, um hier zu bleiben!

behradkhodayar

27

Sie können Flexbox verwenden.

Platzieren Sie Ihre Elemente in einem mehrzeiligen Flex-Container

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

Ordnen Sie die Elemente neu an, sodass die DOM-Reihenfolge horizontal statt vertikal eingehalten wird. Wenn Sie beispielsweise 3 Spalten möchten,

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

Erzwingen Sie einen Spaltenumbruch vor dem ersten Element jeder Spalte:
```
#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
Leider unterstützen noch nicht alle Browser Zeilenumbrüche in der Flexbox. Es funktioniert jedoch unter Firefox.

Code-Snippet anzeigen

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

/* The following is optional */
#flex-container > div {
  background: #666;
  color: #fff;
  margin: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }

<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>

Erweitern Sie das Snippet

Oriol
quelle

Wow, das war eine alte Frage. Die Verwendung von Flexbox zur Simulation des Mauerwerkslayouts ist nicht die beste Option. Ihr Snippet funktioniert übrigens nicht: D, ich denke, Sie verpassen den Punkt hier. Die andere Problemumgehung zur Lösung dieses Problems ist die Verwendung von CSS3-Spalten. aber danke für die Antwort

Ariona Rian

1

@ArionaRian Probieren Sie das Snippet in Firefox aus, andere Browser unterstützen noch keine erzwungenen Zeilenumbrüche. Und ja, CSS-Spalten funktionieren möglicherweise auch, aber im Gegensatz zu Flexbox scheint dies eher für Text als für Layout gedacht zu sein.

Oriol

Ja, das ist das Problem :) Deshalb halten wir uns bis jetzt immer noch an das Plugin für Mauerwerk / Isotope, um diese Art von Design zu entwerfen.

Ariona Rian

Setzen Sie einfach Anzeige: flex; Flex-Wrap: Wrap; (und nichts weiter) auf dem Container, und es funktioniert perfekt in Chrome, Firefox, Safari, IE11 unter Win11 und Win7. Seien Sie jedoch vorsichtig mit der Mindesthöhe (siehe caniuse.com/#search=flex-wrap )

LBJ

@LBJ Aber dann sind die Elemente in Zeilen angeordnet. Das ist hier nicht das gewünschte Verhalten

Oriol

11

Jetzt, da CSS3 über die gängigen Browser weit verbreitet und kompatibel ist, ist es Zeit für eine reine Lösung, die mit dem Snippet-Tool von SO ausgestattet ist:

Für die Erstellung eines Mauerwerkslayouts mit CSS3 würde das column-countzusammen mit column-gapausreichen. Aber ich habe es auch media-queriesimmer reaktionsschnell gemacht.

Bevor Sie sich mit der Implementierung befassen, sollten Sie berücksichtigen, dass es viel sicherer ist, einen Fallback für die jQuery Masonry-Bibliothek hinzuzufügen, um Ihren Code für ältere Browser, insbesondere IE8-, kompatibel zu machen:

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

Auf geht's:

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

Erweitern Sie das Snippet

behradkhodayar
quelle

Wissen Sie, wie Sie zwischen den Gegenständen im Mauerwerk und dem Behälter den gleichen Abstand haben?

Intcreator

5

Es ist gut, aber für viele Leute besteht die Notwendigkeit, das zu bestellen masonry bricks. Die Spalte ordnet die Dinge von oben nach unten an, die Frage lautete, dass die Reihenfolge horizontal gleich bleiben und nicht vertikal wechseln soll. Zum Beispiel sollte der kürzeste Block, der oben gefunden wurde, in der dritten Spalte, aber in der obersten Zeile stehen.

Jscul

4

Die beste Option, um dies nur mit CSS zu lösen, ist die Verwendung der CSS-Spaltenanzahl-Eigenschaft.

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

Überprüfen Sie dies für weitere Informationen: https://developer.mozilla.org/en/docs/Web/CSS/column-count

Patricio Gabriel Maseda
quelle

3

Sie können display: grid verwenden

beispielsweise:

Dies ist ein Raster mit 7 Spalten und Ihre Zeilen haben eine automatische Größe.

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

Weitere Informationen erhalten Sie unter folgendem Link: https://css-tricks.com/snippets/css/complete-guide-grid/

vrbsm
quelle

2

Mit dem CSS-Grid-Modul können Sie ein ziemlich ähnliches Layout erstellen .

CodePen-Demo

1) Stellen Sie drei Rasterspalten mit fester Breite ein

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2) Stellen Sie sicher, dass die Artikel mit großer Höhe 2 Reihen umfassen

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

Code-Snippet anzeigen

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

Erweitern Sie das Snippet

Codepen-Demo

Die Probleme:

Die Lücken zwischen den Elementen sind nicht einheitlich
Sie müssen die großen / hohen Elemente manuell so einstellen, dass sie zwei oder mehr Zeilen umfassen
Eingeschränkte Browserunterstützung :)

Danield
quelle

1

und wenn Sie noch weiter als bis zum Mauerwerk gehen möchten, verwenden Sie das Isotop http://isotope.metafizzy.co/. Es ist die erweiterte Version des Mauerwerks (vom selben Autor entwickelt). Es ist kein reines CSS, sondern verwendet die Hilfe von Javascript aber es ist sehr beliebt, so dass Sie viele Dokumente finden

Wenn Sie es sehr kompliziert finden, gibt es viele Premium-Plugins, deren Entwicklung bereits auf Isotopen basiert, zum Beispiel die Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

user1978456
quelle

1

Es gibt ein gitterbasiertes Beispiel.

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}

<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

Erweitern Sie das Snippet

basierend auf diesem Codestift von Rachel Andrew FTW

Vladimir Ishenko
quelle

Wie erstelle ich eine Raster- / Kachelansicht?

Antworten:

Codepen-Demo

Die Probleme: