Izgara / Döşeme Görünümü Nasıl Oluşturulur?

129

Örneğin, bir sınıf .article'ım var ve bu sınıfı ızgara görünümü olarak görmek istiyorum. Ben de bu stili uyguladım:

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

Bu stil .article'ın kiremitli / ızgara gibi görünmesini sağlar. Sabit yükseklikte iyi çalışıyor. Ancak yüksekliği otomatik olarak ayarlamak istersem (içindeki verilere göre otomatik olarak uzatılır), ızgara çirkin görünüyor.

görüntü açıklamasını buraya girin

Ve görünümü şöyle yapmak istiyorum:

görüntü açıklamasını buraya girin

— Ariona Rian
kaynak

79

Bu tip düzen, Duvar düzeni olarak adlandırılır . Duvarcılık başka bir ızgara düzenidir, ancak elemanların farklı yüksekliğinden kaynaklanan boşlukları dolduracaktır.

jQuery Masonry , duvar düzeni oluşturmak için jQuery eklentilerinden biridir.

Alternatif olarak, CSS3'leri de kullanabilirsiniz column. Ancak şimdilik jQuery tabanlı eklenti, CSS3 sütunuyla uyumluluk sorunu olduğu için en iyi seçimdir.

— bookcasey
kaynak

3

CSS3 yönlü Eklenenler burada kalmak için!

— behradkhodayar

27

Flexbox'ı kullanabilirsiniz.

Öğelerinizi çok satırlı bir kolon esnek kabına yerleştirin

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

DOM sırasına dikey yerine yatay olarak saygı gösterilecek şekilde öğeleri yeniden sıralayın. Örneğin, 3 sütun istiyorsanız,

#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 */

Her sütunun ilk öğesinden önce bir sütun sonu zorlayın:
```
#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
Ne yazık ki, tüm tarayıcılar henüz flexbox'ta satır sonlarını desteklemiyor. Yine de Firefox'ta çalışıyor.

Kod parçacığını göster

#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>

Snippet'i genişlet

— Oriol
kaynak

Vay canına, bu eski bir soruydu. Ve duvar düzenini simüle etmek için flexbox kullanmak en iyi seçenek değildir. Pasajınız bu arada çalışmıyor: D, bence buradaki noktayı kaçırdınız. Bu sorunu çözmek için diğer geçici çözüm CSS3 sütunlarını kullanmaktır. ama, cevabınız için teşekkürler

— Ariona Rian

1

@ArionaRian Snippet'i Firefox'ta deneyin, diğer tarayıcılar henüz zorunlu satır sonlarını desteklemiyor. Ve evet, CSS sütunları da işe yarayabilir, ancak düzenden çok metin için tasarlanmış flexbox'ın aksine.

— Oriol

Evet, sorun bu :), Bu yüzden şimdiye kadar, bu tür bir tasarımı yerleştirmek için hala duvarcılık / izotop eklentisine bağlıyız.

— Ariona Rian

Sadece ekranı koyun: flex; esnek sarma: sarma; (ve daha fazlası değil) kapsayıcıda ve Chrome, Firefox, Safari, Win11 ve Win7'de IE11'de mükemmel çalışıyor. Minimum yükseklik konusunda dikkatli olun ( caniuse.com/#search=flex-wrap'e bakın )

— LBJ

@LBJ Ama sonra öğeler satırlar halinde düzenlenir. Burada istenen davranış bu değil

— Oriol

11

Artık CSS3 yaygın olarak kullanılabilir ve büyük tarayıcılar aracılığıyla uyumludur. SO'nun snippet aracıyla donatılmış saf bir çözümün zamanı geldi:

Duvarcılık yaratmak içinCSS3 kullanarak düzeni , column-countbirlikte column-gapyeterli olacaktır. Ama aynı zamanda media-queriesonu duyarlı hale getirdim .

Uygulamaya geçmeden önce, kodunuzu eski tarayıcı, özellikle de IE8- ile uyumlu hale getirmek için bir jQuery Masonry kitaplığı eklemenin çok daha güvenli olacağını lütfen unutmayın:

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

İşte başlıyoruz:

.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>

Snippet'i genişlet

— behradkhodayar
kaynak

Duvardaki öğeler ile kap arasında nasıl eşit boşluk bırakılacağını biliyor musunuz?

— intcreator

5

İyi ama birçok insan için SİPARİŞ VERME zorunluluğu var masonry bricks. Sütun, her şeyi yukarıdan aşağıya sıralar, soru, sıranın yatay olarak aynı kalmasını, dikey olarak geçmemesini istemekti. Örneğin, yukarıda bulunan en kısa blok üçüncü sütunda ancak en üst satırda OLMALIDIR.

— jscul

4

Bunu sadece css ile çözmek için en iyi seçenek css column-count özelliğini kullanmaktır.

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

Daha fazla bilgi için bunu kontrol edin: https://developer.mozilla.org/en/docs/Web/CSS/column-count

— Patricio Gabriel Maseda
kaynak

3

Display: grid'i kullanabilirsiniz

Örneğin:

Bu, 7 sütunlu bir ızgaradır ve satırlarınızın otomatik boyutu vardır.

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

Daha fazla ayrıntı için aşağıdaki bağlantıya erişin: https://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
kaynak

2

İle CSS Izgara Modülü bir oluşturabilir oldukça benzer düzeni.

CodePen demosu

1) Üç sabit genişlikte ızgara sütunu ayarlayın

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

2) Yüksekliği büyük olan parçaların 2 sıra olduğundan emin olun.

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;
}

Kod parçacığını göster

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>

Snippet'i genişlet

Codepen demosu

Problemler:

Öğeler arasındaki boşluklar tek tip olmayacak
Büyük / yüksek öğeleri manuel olarak 2 veya daha fazla satırı kapsayacak şekilde ayarlamanız gerekir
Sınırlı tarayıcı desteği :)

— Danield
kaynak

1

ve duvarcılıktan daha da ileri gitmek istiyorsanız, izotop kullanın http://isotope.metafizzy.co/ bu, duvarcılığın gelişmiş sürümüdür (aynı yazar tarafından geliştirilmiştir), saf CSS değildir, Javascript'in yardımını kullanır ancak çok popüler olduğu için pek çok belge bulacaksınız

Eğer bunu çok karmaşık bulursanız, geliştirmelerini izotop üzerine kuran birçok premium eklenti vardır, örneğin Ortam Kutuları http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

— user1978456
kaynak

1

Orada bir ızgara tabanlı bir örnek.

.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>

Snippet'i genişlet

Rachel Andrew FTW'nin bu kod kalemine dayanarak

— Vladimir Ishenko
kaynak