Balok demi balok: Bantu kami membangun CSS Masonry

Patrick Brosset

Alison Maher

Dipublikasikan: 23 Juli 2025

Tim Microsoft Edge dan Google Chrome dengan senang hati mengumumkan bahwa CSS masonry siap untuk pengujian awal developer dari Chrome dan Edge 140.

Dengan masalah terbuka seputar spesifikasi dan sintaksis tata letak CSS yang masih ada, masukan Anda sangat penting untuk membantu kami memantapkan bentuk akhir API. Coba fitur ini dan beri tahu kami pendapat Anda.

Uji Masonry CSS di Chromium sekarang

Untuk menguji CSS Masonry sekarang:

1. Gunakan Chrome atau Edge 140 atau yang lebih baru (atau browser berbasis Chromium lain dengan versi yang cocok).
2. Buka about:flags di tab baru.
3. Telusuri "CSS Masonry Layout".
4. Aktifkan tanda.
5. Mulai ulang browser.

Dengan mengaktifkan fitur ini, Anda dapat melihat cara kerjanya dengan melihat demo Microsoft Edge (lihat kode sumber demo), atau terus membaca untuk mempelajari lebih lanjut fitur ini dan sintaksis yang tersedia.

Apa itu tata letak masonry?

Tata letak masonry CSS adalah mode tata letak yang memungkinkan Anda membuat susunan item seperti bata, dengan cara yang tidak mudah dicapai dengan tata letak petak CSS, flexbox, atau multi-kolom.

Tata letak CSS dapat digunakan untuk mengatur item dalam format kolom atau baris dengan item yang ditempatkan dalam kolom atau baris tersebut secara diciutkan.

Anggaplah tata letak bata sebagai jalan tol, dengan satu-satunya batasan adalah jumlah dan ukuran jalur mengemudi yang berbeda. Di dalam jalur, kendaraan dapat mengambil panjang apa pun yang diinginkan, dan selalu mencoba berada sedekat mungkin dengan tujuan, yaitu awal tata letak masonry.

Item tata letak Anda hanya dibatasi dalam satu arah dan dapat bergerak bebas di sepanjang arah lainnya, terlepas dari item lain yang berdekatan. Tata letak bata berbeda dari tata letak petak karena jalur tata letaknya hanya ditentukan dalam satu arah.

Dalam tata letak petak, urutan visual item kurang penting daripada desain akhir. Tata letak Masonry memungkinkan Anda memaksimalkan ruang yang tersedia, apa pun item yang Anda miliki. Hal ini menjadikannya pilihan yang tepat untuk halaman yang sangat intensif secara visual, dan di mana urutan visual konten tidak terlalu penting dibandingkan hasil akhir.

Salah satu aspek menarik dari tata letak bata adalah tata letak ini juga memungkinkan item mencakup beberapa jalur, seperti pada tata letak petak. Jika hal itu terjadi, item akan terus ditempatkan sedemikian rupa sehingga mengisi ruang yang tersedia sebanyak mungkin.

Perilaku penempatan otomatis ini dapat menghasilkan hasil yang sangat menarik, yang telah lama diupayakan oleh desainer web. Sebagai contoh, lihat demo galeri foto New York City, yang menunjukkan cara foto dapat ditampilkan secara ringkas di beberapa kolom, sekaligus memungkinkan item tertentu (judul dalam contoh ini) ditampilkan di beberapa kolom:

Berikut beberapa contoh lain penggunaan tata letak masonry.

Tata letak blog, yang menampilkan thumbnail dan deskripsi setiap postingan.

Situs berita, tempat artikel muncul dalam kolom, dengan beberapa artikel lebih lebar daripada yang lain, dan gambar utama mencakup seluruh lebar halaman.

Kumpulan foto, dengan ukuran kolom yang berbeda, dan foto tertentu yang mencakup beberapa kolom.

Solusi dan batasannya

Menerapkan pola desain ini di web saat ini mengharuskan Anda menggunakan library JavaScript atau solusi sementara yang menggunakan petak CSS, flexbox, atau multi-kolom. Namun, melakukan hal ini dapat menimbulkan kerugian, termasuk:

• Performa yang lebih buruk: Mengandalkan library JavaScript atau kode kustom untuk meniru tata letak CSS masonry memiliki pertukaran performa, yang dapat menyebabkan pengalaman pengguna yang negatif.
• Kompleksitas kode yang lebih tinggi:
  • Menjamin penempatan item yang benar dan distribusi ruang dalam petak CSS, flexbox, atau multi-kolom untuk meniru tata letak CSS masonry sulit dicapai.
  • Menangani fitur tertentu seperti item yang mencakup lebih dari satu kolom atau baris, pengurutan item kustom, atau penyesuaian ke area tampilan juga dapat menimbulkan kerumitan dan batasan.
• Beban pemeliharaan yang lebih besar: kode CSS atau JavaScript kustom yang kompleks lebih sulit dipelihara.

Grid CSS adalah mode tata letak luar biasa yang sangat fleksibel dan memungkinkan Anda membuat banyak gaya tata letak yang berbeda, baik untuk seluruh halaman web, atau komponen, atau hanya untuk menyelaraskan item individual. Namun, tata letak ini tidak memiliki karakteristik yang sama dengan tata letak masonry.

Dalam petak CSS, baris dan kolom ditentukan secara kaku dan item hanya dapat ada dalam sel petak. Jika Anda mencoba mengemas item di sepanjang salah satu sumbu, tetapi item tidak berukuran agar sesuai dengan selnya masing-masing, Anda harus memilih antara membiarkan celah di antara item atau meregangkannya untuk mengisi ruang kosong.

Sama seperti tata letak bata, flexbox hanya memperhatikan satu arah, dan memungkinkan item memutuskan ruang yang ingin ditempatinya di sepanjang arah lainnya. Artinya, Anda dapat membuat tata letak yang terlihat seperti tata letak susun tempel menggunakan flexbox, selama Anda ingin item ditata dalam arah blok, satu kolom dalam satu waktu. Penampung fleksibel juga memerlukan ukuran blok atau tinggi yang ditentukan, agar item dapat di-wrap ke baris fleksibel baru, sehingga membuat kolom baru.

Multi-kolom juga dapat membuat tata letak yang terlihat seperti susunan batu, dengan mengatur item dalam kolom. Selain itu, multi-kolom tidak memungkinkan Anda mengubah ukuran setiap kolom secara berbeda. Semuanya berukuran sama, sedangkan tata letak masonry memberikan banyak fleksibilitas dalam menentukan jalur tempat item dikemas.

Hal yang perlu diingat di sini bukan bahwa tata letak petak, flexbox, atau multi-kolom lebih buruk daripada tata letak masonry. Tata letak ini sangat bagus dan memiliki banyak kasus penggunaan. Intinya: jika Anda menginginkan tata letak masonry, maka masonry CSS adalah yang akan memberikannya kepada Anda.

Status tata letak CSS

Kelompok Kerja CSS sedang menyusun draf tata letak bata dalam spesifikasi CSS Grid Level 3. Spesifikasi masih dalam tahap pengembangan dan untuk sementara mencakup dua sintaksis yang diusulkan berbeda. Yang pertama menggunakan kata kunci baru untuk properti display, sedangkan yang kedua mengintegrasikan tata letak masonry langsung ke tata letak petak CSS.

Gunakan display: masonry

Sintaksis ini memperkenalkan tata letak CSS sebagai jenis display-nya sendiri. Detail selengkapnya tentang pendekatan dan motivasinya dapat ditemukan dalam postingan blog Masukan diperlukan: Bagaimana cara menentukan tata letak CSS? dari tim Google Chrome, serta di bagian postingan ini. Prototipe saat ini di Chromium didasarkan pada proposal ini.

display: grid; grid-template-*: masonry;

Dalam sintaksis ini, tata letak CSS terintegrasi langsung ke petak CSS. Mode tata letak sarang lebah dipicu dengan menerapkan kata kunci masonry ke definisi grid-template-columns dalam kasus tata letak sarang lebah berbasis baris, atau ke definisi grid-template-rows dalam kasus tata letak sarang lebah berbasis kolom.

Detail selengkapnya tentang proposal ini dan motivasinya dapat ditemukan di postingan WebKit Help us choose the final syntax for Masonry in CSS.

Perhatikan bahwa alternatif untuk proposal ini adalah properti item-pack dan kata kunci collapse, yang akan memicu tata letak CSS, bukan menggunakan salah satu dari dua properti template petak.

Sejak publikasi postingan oleh tim Chrome dan WebKit, CSSWG telah melanjutkan diskusi seputar sintaksis keseluruhan yang akan digunakan. Masukan Anda dapat membantu menginformasikan pengembangan lebih lanjut dalam forum ini.

Untuk mengetahui detail selengkapnya tentang status diskusi saat ini, lihat masalah 11593, yang menguraikan serangkaian topik diskusi sintaksis tata letak bata saat ini, dan masalah 11243 untuk mengetahui ringkasan perdebatan sintaksis sejauh ini.

Membuat tata letak masonry CSS Anda sendiri

Mari bersenang-senang dan membuat tata letak masonry CSS.

Meskipun sintaksis untuk tata letak CSS masih dalam pembahasan, penerapan fitur ini dapat diuji di Chromium hari ini dengan mengaktifkan tanda Tata Letak CSS Masonry seperti yang dijelaskan dalam Menguji CSS Masonry hari ini. Contoh berikut menunjukkan apa yang tersedia dalam uji coba developer.

Membuat penampung tata letak masonry

Untuk membuat penampung tata letak bata pertama berbasis kolom, gunakan display:masonry dan tentukan ukuran kolom menggunakan grid-template-columns. Karena masonry-direction secara default ditetapkan ke column, setelan properti ini bersifat opsional.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

Untuk penampung tata letak masonry berbasis baris, gunakan display:masonry, tentukan ukuran baris menggunakan grid-template-rows, lalu tetapkan masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Seperti yang mungkin telah Anda perhatikan, sintaksis ini sedikit berbeda dari proposal asli dari Google. Terlepas dari pemicu yang digunakan untuk CSS Masonry, CSS Working Group memutuskan untuk menggunakan kembali properti penempatan dan penetapan ukuran template petak dalam tata letak CSS Masonry.

Meskipun hal ini memungkinkan penggunaan kembali properti yang lebih besar di antara jenis tata letak, Anda mungkin merasa bingung, dan kami ingin mendengar pendapat Anda tentang hal ini. Kami dapat mempertimbangkan untuk membuat alias yang lebih umum untuk properti seperti grid-template-columns dan grid-template-rows, misalnya template-columns atau template-rows, yang dapat digunakan untuk tata letak petak dan masonry.

Menggunakan ukuran trek default

Dengan jenis tampilan baru, ada peluang untuk memikirkan ulang default properti.

Dalam petak, grid-template-columns dan grid-template-rows secara default adalah none yang, seperti yang saat ini ditentukan, biasanya menghasilkan satu kolom atau baris. Untuk masonry, nilai default ini akan sering kali menghasilkan tata letak yang tidak diinginkan.

Penerapan di Chromium menambahkan definisi yang baru diusulkan untuk none, yang akan menggantikan ukuran jalur default dalam tata letak CSS. Ukuran jalur default baru ini adalah nilai repeat(auto-fill, auto). Nilai ini membuat tata letak masonry yang bagus tanpa harus menentukan ukuran jalur sama sekali:

.masonry {
  display: masonry;
  gap: 10px;
}

Seperti yang ditunjukkan pada gambar, penampung masonry membuat kolom berukuran otomatis sebanyak yang muat di ruang yang tersedia.

Dengan petak CSS, semua item ditempatkan sebelum jalur diukur, yang berarti bahwa definisi pengubahan ukuran otomatis jalur ini tidak mungkin dilakukan. Namun, dengan tata letak masonry CSS, batasan ini tidak lagi berlaku, karena penempatan dan ukuran saling terkait dan disederhanakan. Dengan dicabutnya batasan ini, kami dapat menyediakan ukuran default jalur yang lebih berguna untuk tata letak masonry.

Coba properti singkat masonry

Seperti yang disebutkan sebelumnya, implementasi saat ini di Chromium mengandalkan properti grid-template-* untuk menentukan jalur tata letak masonry. Namun, karena tata letak masonry hanya memiliki satu dimensi, kami juga telah menerapkan properti singkat masonry, yang dapat Anda gunakan untuk menentukan arah masonry dan definisi jalur sekaligus, tanpa properti berawalan grid- yang membingungkan.

Misalnya, dua cuplikan kode berikut akan membuat penampung tata letak bata CSS yang setara.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

Singkatan masonry masih dalam diskusi oleh CSS Working Group. Coba sekarang dan beri tahu kami pendapat Anda.

Menggunakan ukuran jalur kustom

Dalam hal menentukan ukuran jalur, tata letak masonry sama fleksibelnya dengan tata letak petak dalam memungkinkan Anda menyesuaikan jumlah dan ukuran jalur tata letak. Trek tata letak Masonry tidak harus berukuran sama, misalnya:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

Dalam contoh ini, kita menentukan dua jalur 3rem pertama, diikuti dengan sejumlah jalur 5rem yang bervariasi, lalu satu jalur 12rem.

Mencakup beberapa jalur

Dalam tata letak masonry, item tidak harus dibatasi ke jalur tempat item ditempatkan karena item dapat mencakup beberapa jalur jika diperlukan. Hal ini dapat sangat berguna jika beberapa item lebih penting daripada item lainnya dan memerlukan ruang yang lebih besar.

Contoh:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

Anda juga dapat menggunakan kemampuan ini untuk mencakup beberapa jalur agar item tertentu memiliki panjang yang sama dengan penampungnya:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

Bagian ini digunakan oleh demo situs berita untuk menampilkan iklan langganan dalam artikel.

Menyesuaikan penempatan item tata letak

Di CSS Masonry, item ditempatkan di kolom atau baris yang memiliki posisi berjalan terpendek.

Bayangkan penampung tata letak bata dua kolom. Jika penampung memiliki item setinggi 110 piksel di kolom pertama dan item setinggi 100 piksel di kolom kedua, item ketiga akan ditempatkan di kolom kedua, yang akan 10 piksel lebih dekat ke awal arah tata letak masonry.

Jika Anda menganggap perbedaan 10 piksel dalam posisi berjalan cukup kecil untuk kasus Anda, dan lebih memilih item ketiga ditempatkan di kolom pertama, agar lebih cocok dengan urutan sumber, gunakan properti item-tolerance.

Properti item-tolerance yang baru mengontrol sensitivitas dalam penempatan item.

Dalam contoh sebelumnya, Anda dapat menerapkan item-tolerance: 10px; ke penampung untuk menyesuaikan variabilitas dalam penempatan item:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

Perhatikan bahwa draf spesifikasi memanggil properti ini item-slack. Grup Kerja CSS baru-baru ini memutuskan untuk menggunakan item-tolerance sebagai nama, dan spesifikasinya akan segera diperbarui.

Properti lain yang tersedia

Anda dapat menggunakan properti penentuan ukuran dan penempatan template yang sama untuk menentukan ukuran dan menempatkan item di sumbu petak penampung masonry seperti yang dapat Anda lakukan dengan Petak CSS, seperti grid-row, grid-column, grid-area, grid-template-areas, atau order. Rasakan kecanggihan penuh petak CSS saat membuat tata letak masonry Anda.

Minta masukan

Kami tidak sabar menanti Anda menjelajahi tata letak CSS, berkreasi, dan menemukan kemampuan baru yang dapat Anda manfaatkan. Cara terbaik untuk memulai adalah dengan melihat demo dan kode sumbernya, lalu mulai membuat contoh Anda sendiri di Chromium (jangan lupa untuk mengaktifkan flag-nya terlebih dahulu).

Masukan Anda penting untuk membantu kami membentuk API dan memastikan bahwa API tersebut dirancang untuk memenuhi kebutuhan Anda di web. Cobalah tata letak masonry dan beri tahu kami pendapat Anda.

Jika Anda memiliki pendapat atau masukan tentang bentuk API, beri tahu kami dengan mengomentari Masalah 11243 atau, jika Anda lebih suka menulis postingan di blog Anda sendiri atau di media sosial, pastikan untuk memberi tahu kami di X atau LinkedIn.

Tata letak CSS masonry masih diimplementasikan di Chromium. Jika Anda mengujinya, perlu diketahui bahwa kami masih aktif mengerjakannya dan Anda mungkin menemukan kasus saat fitur ini tidak berfungsi seperti yang diharapkan. Beberapa batasan saat ini mencakup pengemasan padat, penempatan terbalik, dukungan subgrid, dukungan di luar alur, dukungan dasar, dukungan DevTools, dukungan fragmentasi, dukungan dekorasi celah, dan lain-lain.

Jika Anda menemukan bug saat menguji fitur ini, bagikan masukan Anda dengan membuka bug Chromium baru.