Bagaimana Cara Membuat Tampilan Grid / Tile?

129

Sebagai contoh, saya memiliki beberapa kelas .article, dan saya ingin melihat kelas ini sebagai tampilan kotak. Jadi saya menerapkan gaya ini:

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

Gaya itu akan membuat .article terlihat ubin / kotak. Ini berfungsi baik dengan ketinggian tetap. Tetapi jika saya ingin mengatur ketinggian ke otomatis (otomatis meregangkan sesuai dengan data di dalamnya), grid terlihat buruk.

masukkan deskripsi gambar di sini

Dan saya ingin membuat tampilan seperti ini:

masukkan deskripsi gambar di sini

css grid positioning css-float tiles Ariona Rian
sumber

78

Jenis tata letak ini disebut tata letak Masonry . Masonry adalah tata letak grid lain tetapi itu akan mengisi ruang putih yang disebabkan oleh perbedaan ketinggian elemen.

jQuery Masonry adalah salah satu plugin jQuery untuk membuat tata letak batu.

Atau, Anda dapat menggunakan CSS3 column. Tetapi untuk sekarang plugin berbasis jQuery adalah pilihan terbaik karena ada masalah kompatibilitas dengan kolom CSS3.

rak buku
sumber

3

Menambahkan cara CSS3 untuk tetap di sini !

behradkhodayar

27

Anda dapat menggunakan flexbox.

Tempatkan elemen Anda dalam wadah fleksibel kolom multiline

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

Susun ulang elemen, sehingga urutan DOM dihormati secara horizontal, bukan vertikal. Misalnya, jika Anda ingin 3 kolom,

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

Paksa istirahat kolom sebelum item pertama dari setiap kolom:

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

Sayangnya, belum semua browser mendukung jeda di flexbox. Ini bekerja pada Firefox.

Tampilkan cuplikan kode

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

Luaskan cuplikan

Oriol
sumber

Wow, ini pertanyaan lama. Dan menggunakan flexbox untuk mensimulasikan tata letak batu bukan pilihan terbaik. Cuplikan Anda tidak berfungsi: D, saya pikir Anda melewatkan intinya di sini. Solusi lain untuk menyelesaikan masalah ini adalah dengan menggunakan kolom CSS3. tapi, terima kasih atas jawabannya

Ariona Rian

1

@ArionaRian Cobalah cuplikan di Firefox, browser lain belum mendukung pemutusan saluran. Dan ya, kolom CSS mungkin berfungsi juga, tetapi tidak seperti flexbox yang tampaknya lebih dirancang untuk teks daripada tata letak.

Oriol

Ya, itu masalahnya :), Itu sebabnya sampai sekarang, kita masih tetap menggunakan plugin pasangan batu / isotop untuk mengeluarkan desain semacam ini.

Ariona Rian

Cukup tampilkan: fleksibel; flex-wrap: bungkus; (dan tidak lebih) pada wadah, dan berfungsi sempurna di Chrome, Firefox, Safari, IE11 pada Win11 dan Win7. Namun berhati-hatilah dengan ketinggian minimum (lihat caniuse.com/#search=flex-wrap )

LBJ

@ LBJ Tapi kemudian elemen diatur dalam baris. Itu bukan perilaku yang diinginkan di sini

Oriol

11

Sekarang CSS3 tersedia secara luas & kompatibel melalui browser utama, Saatnya untuk solusi murni yang dilengkapi dengan alat cuplikan SO:

Untuk membuat tata letak batu menggunakan CSS3 column-countdan column-gapcukup. Tapi saya juga terbiasa media-queriesmembuatnya responsif.

Sebelum masuk ke implementasi, pertimbangkan bahwa akan jauh lebih aman untuk menambahkan fallback perpustakaan jQuery Masonry untuk membuat kode Anda kompatibel untuk browser lawas, khususnya IE8-:

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

Kita mulai:

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

Luaskan cuplikan

behradkhodayar
sumber

Apakah Anda tahu cara memiliki ruang yang sama antara item dalam pasangan bata dan wadah?

intcreator

5

Ini bagus tetapi bagi banyak orang, ada keharusan untuk MEMESAN masonry bricks. Kolom memerintahkan hal-hal dari atas ke bawah, pertanyaannya adalah meminta agar tetap sama secara horizontal, bukan untuk beralih ke vertikal. Misalnya, blok terpendek yang ditemukan di atas HARUS berada di kolom ketiga tetapi di baris atas.

jscul

4

Pilihan terbaik untuk menyelesaikannya dengan hanya css adalah menggunakan properti hitung kolom css.

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

Periksa ini untuk info lebih lanjut: https://developer.mozilla.org/en/docs/Web/CSS/column-count

Patricio Gabriel Maseda
sumber

3

Anda dapat menggunakan display: grid

sebagai contoh:

Ini adalah kisi dengan 7 kolom dan baris Anda memiliki ukuran otomatis.

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

Untuk detail lebih lanjut, akses tautan berikut: https://css-tricks.com/snippets/css/complete-guide-grid/

vrbsm
sumber

2

Dengan Modul Kotak CSS Anda dapat membuat tata letak yang sangat mirip .

Demo CodePen

1) Setel tiga kolom kotak lebar tetap

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

2) Pastikan barang dengan rentang tinggi besar 2 baris

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

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Demo codepen

Masalah:

Kesenjangan antara item tidak akan seragam
Anda harus secara manual mengatur item besar / tinggi untuk rentang 2 atau lebih baris
Dukungan browser terbatas :)

Danield
sumber

1

dan jika Anda ingin melangkah lebih jauh dari batu, gunakan isotop http://isotope.metafizzy.co/ ini adalah versi lanjutan dari batu (yang dikembangkan oleh penulis yang sama) itu bukan CSS murni, ia menggunakan bantuan Javascript tetapi sangat populer, jadi Anda akan menemukan banyak dokumen

jika Anda merasa sangat rumit maka sudah ada banyak plugin premium yang mendasarkan pengembangannya pada isotop, misalnya Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

pengguna1978456
sumber

1

Ada satu contoh berbasis kisi .

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

Luaskan cuplikan

berdasarkan kode-pena ini oleh Rachel Andrew FTW

Vladimir Ishenko
sumber

Bagaimana Cara Membuat Tampilan Grid / Tile?

Jawaban:

Demo codepen

Masalah: