Wie erstelle Raster/kachelansicht?

Zum Beispiel, ich habe einige Klasse .Artikel, und ich möchte, um diese Klasse als grid-Ansicht. So bewarb ich mich diesem Stil:

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

Diesem Stil zu machen .Artikel schauen, Fliesen - /Netz. Es funktioniert mit fester Höhe. Aber wenn ich die Höhe auf auto (automatisch Strecken nach den Daten), die Gitter schauen böse.

Wie erstelle Raster/kachelansicht?

Und ich möchte die Ansicht wie diese:

Wie erstelle Raster/kachelansicht?

InformationsquelleAutor Ariona Rian | 2011-12-12

  1. 76

    Diese Art von layout aufgerufen wird Mauerwerk layout. Mauerwerk ist ein weiterer grid-layout, aber es wird füllen Sie das Leerzeichen, verursacht durch die Differenz Höhe der Elemente.

    jQuery Mauerwerk ist ein jQuery-plugin zur Erstellung von Mauerwerk-layout.

    Alternativ, Sie verwenden können, CSS3 die Spaltes. Aber nun auf jQuery basierende plugin ist die beste Wahl, da es die Kompatibilität Problem mit CSS3-Spalte.

    Hinzugefügt CSS3-Weg here zu bleiben !

    InformationsquelleAutor bookcasey

  2. 4

    Die beste option, um zu lösen, dass nur mit css über css-column-count-Eigenschaft.

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

    Überprüfen Sie diese für mehr info: https://developer.mozilla.org/en/docs/Web/CSS/column-count

    Es ist toll, & genial 🙂 vielen Dank

    InformationsquelleAutor Patricio Gabriel Maseda

  3. 1

    und wenn Sie wollen sogar noch weiter gehen als Mauerwerk, verwenden Isotop http://isotope.metafizzy.co/ es ist die erweiterte version von Mauerwerk entwickelt wurde (vom selben Autor) es ist nicht Reine CSS-Dateien, es verwendet die Hilfe von Javascript, aber es ist sehr beliebt, so finden Sie viele docs

    wenn Sie finden, dass es sehr kompliziert ist dann gibt es viele premium-plugins, basiert Ihre Entwicklung auf isotope, die bereits, zum Beispiel die Medien-Boxen http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

    InformationsquelleAutor user1978456

  4. 1

    Können Sie anzeigen: grid

    Beispiel:

    Dies ist ein Gitter mit 7 Spalten und die Zeilen die 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;
}

    Für mehr details acccess dem link Folgen: https://css-tricks.com/snippets/css/complete-guide-grid/

    InformationsquelleAutor vrbsm

Schreibe einen Kommentar