Dipublikasikan: 19 September 2024, Terakhir diperbarui: 13 Februari 2026
Kelompok Kerja CSS telah menggabungkan dua proposal tata letak CSS menjadi satu spesifikasi draf. Grup ini berharap hal ini akan mempermudah perbandingan keduanya, dan pengambilan keputusan akhir. Tim Chrome masih yakin bahwa sintaksis tata letak terpisah adalah cara terbaik untuk melanjutkan. Meskipun masalah performa terbesar yang disebutkan dalam postingan kami sebelumnya telah diselesaikan, masih ada kekhawatiran terkait sintaksis, nilai awal, dan seberapa mudah versi yang dikombinasikan dengan petak dipelajari.
Namun, untuk menguji asumsi kami, kami telah mengerjakan beberapa contoh untuk menunjukkan cara kerja tata letak masonry dengan setiap versi. Lihat contoh dalam postingan ini dan beri kami masukan agar kami dapat membuat keputusan dan melanjutkan fitur ini.
Postingan ini tidak mencakup semua kemungkinan kasus penggunaan, tetapi jelas bahwa memisahkan tata letak masonry dari tata letak petak tidak akan membuat fitur ini kekurangan fungsi. Bahkan, yang terjadi mungkin sebaliknya. Seperti yang akan Anda lihat dalam postingan ini, versi display: masonry menciptakan peluang baru dan sintaksis yang lebih sederhana.
Selain itu, banyak developer telah menyampaikan kekhawatiran tentang potensi
penyusunan ulang item dengan tata letak masonry yang menyebabkan masalah aksesibilitas. Hal ini juga sedang
ditangani untuk kedua versi sintaksis, melalui properti reading-flow
yang diusulkan.
Tata letak masonry dasar
Tata letak ini adalah tata letak yang dibayangkan sebagian besar orang saat memikirkan tata letak masonry. Item ditampilkan dalam baris, dan setelah baris pertama ditempatkan, item berikutnya akan berpindah ke ruang yang ditinggalkan oleh item yang lebih pendek.
Dengan display: masonry
Untuk membuat tata letak masonry, gunakan nilai masonry untuk properti display. Tindakan ini akan membuat tata letak masonry dengan jalur kolom yang Anda tentukan (atau ditentukan oleh konten) dan masonry di sumbu lainnya. Item pertama ditampilkan di awal blok dan inline (oleh karena itu, di kiri atas dalam bahasa Inggris), dan item disusun dalam arah inline.
Untuk menentukan jalur, gunakan masonry-template-tracks dengan nilai daftar jalur seperti yang digunakan
dalam tata letak petak CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Dengan display: grid
Untuk membuat tata letak masonry, buat tata letak petak terlebih dahulu menggunakan nilai grid
untuk properti display. Tentukan kolom dengan properti grid-template-columns, lalu beri grid-template-rows nilai masonry.
Hal ini akan membuat tata letak seperti yang Anda harapkan dengan item petak yang ditempatkan secara otomatis, tetapi item di setiap baris menggunakan tata letak susun bata dan akan diatur ulang untuk mengisi ruang yang ditinggalkan oleh item yang lebih kecil di baris sebelumnya.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Poin yang perlu dipertimbangkan antara kedua opsi
Perbedaan yang signifikan antara kedua metode ini adalah bahwa dengan versi display: masonry, Anda akan mendapatkan tata letak masonry meskipun Anda tidak menentukan trek apa pun dengan masonry-template-tracks. Oleh karena itu, display: masonry mungkin sudah cukup.
Hal ini karena nilai awal masonry-template-tracks adalah
repeat(auto-areas, auto). Tata letak membuat sebanyak mungkin jalur berukuran otomatis yang akan
sesuai dengan penampung.
Flow terbalik dengan tata letak bata
Spesifikasi ini mencakup cara mengubah arah aliran tata letak masonry. Misalnya, Anda dapat mengubah alur untuk ditampilkan dari akhir blok ke atas.
Dengan display: masonry
Buat tata letak masonry dengan display: masonry, lalu gunakan masonry-direction
dengan nilai column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Dengan display: grid
Buat tata letak masonry dengan display: grid dan grid-template-rows: masonry.
Kemudian, gunakan properti grid-auto-flow dengan nilai row-reverse baru untuk
menyebabkan item ditata dari akhir blok penampung petak.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Poin yang perlu dipertimbangkan antara kedua opsi
Versi display: masonry terasa sangat mirip dengan cara kerja flexbox. Ubah
arah aliran kolom menggunakan properti masonry-direction dengan
nilai column-reverse.
Versi petak CSS menggunakan grid-auto-flow. Seperti yang ditentukan saat ini, grid-auto-flow: row-reverse dan grid-auto-flow: column-reverse akan memberikan efek yang sama. Hal ini dapat membingungkan, karena Anda mungkin mengharapkan mereka melakukan
sesuatu yang berbeda.
Masonry untuk baris
Anda juga dapat mengubah arah untuk menentukan baris.
Dengan display: masonry
Buat tata letak masonry dengan display: masonry, lalu tetapkan nilai
masonry-direction ke row. Kecuali jika Anda ingin baris memiliki ukuran
blok tertentu, Anda tidak perlu menentukan ukuran trek karena defaultnya adalah auto,
sehingga trek akan menyesuaikan ukuran dengan konten yang ada di dalamnya.
.masonry {
display: masonry;
masonry-direction: row;
}
Dengan display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Poin yang perlu dipertimbangkan antara kedua opsi
Seperti pada alur terbalik, mengubah versi display: masonry dari kolom menjadi
baris berarti mengubah nilai masonry-direction. Dengan versi petak, Anda harus menukar nilai properti grid-template-columns dan grid-template-rows. Atau, jika menggunakan singkatan, ubah urutan
sintaksis.
Dengan kedua contoh alur peralihan ini, versi display: masonry terasa lebih intuitif. Ada satu properti yang mengontrol alur
masonry-direction, yang menggunakan salah satu nilai berikut:
rowcolumnrow-reversecolumn-reverse
Kemudian, tambahkan informasi ukuran yang diperlukan ke masonry-template-tracks,
dengan asumsi nilai otomatis default bukan yang Anda butuhkan.
Dengan petak, untuk melakukan arah terbalik, Anda harus menggunakan properti grid-auto-flow, dan untuk melakukan peralihan tata letak baris, ubah nilai properti grid-template-*. Anda juga tidak dapat membiarkan nilai untuk sumbu petak tidak ditentukan dalam sintaksis petak saat ini. Anda harus selalu menentukan properti grid-template-* pada sumbu yang tidak memiliki nilai masonry.
Memosisikan item
Di kedua versi, Anda dapat menempatkan item secara eksplisit menggunakan penempatan berbasis garis yang sudah Anda kenal dari tata letak petak. Di kedua versi, Anda hanya dapat memosisikan item di sumbu petak, yaitu sumbu dengan jalur yang telah ditentukan sebelumnya. Anda tidak dapat memosisikan item pada sumbu yang melakukan tata letak masonry.
Dengan display: masonry
CSS berikut menentukan tata letak masonry dengan empat kolom. Sumbu petak adalah
kolom. Item dengan class a ditempatkan dari garis kolom pertama
hingga garis kolom ketiga, yang mencakup dua jalur dengan properti
masonry-track-* baru. Ini juga dapat ditentukan sebagai singkatan dari
masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Dengan display: grid
CSS berikut menentukan tata letak masonry dengan empat kolom. Sumbu petak adalah
kolom. Item dengan class a ditempatkan dari garis kolom pertama hingga garis kolom ketiga, yang mencakup dua jalur dengan properti grid-column-*. Ini juga dapat ditentukan sebagai singkatan dari grid-column: 1 / 3;.
Jika sumbu petak adalah kolom, properti grid-row-* akan diabaikan,
dan jika sumbu petak adalah baris, properti grid-columns-* akan diabaikan.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Anda dapat menggunakan garis bernama dengan kedua sintaksis. Contoh berikut menunjukkan petak
dengan dua garis kolom bernama a.
Dengan display: masonry
Garis bernama ditentukan dalam nilai daftar lagu
masonry-template-tracks. Item dapat ditempatkan setelah baris yang bernama a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Dengan display: grid
Garis bernama ditentukan dalam nilai daftar lagu
grid-template-columns. Item ditempatkan setelah baris pertama yang bernama a. Jika
properti grid-row ditentukan, properti tersebut akan diabaikan.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Anda juga dapat menggunakan area bernama dalam kedua sintaksis. Contoh berikut menunjukkan petak dengan tiga jalur bernama "a", "b", dan "c".
Dengan display: masonry
Jalur diberi nama sebagai nilai masonry-template-areas. Karena tidak ada ukuran
jalur yang ditentukan, ketiga jalur tersebut memiliki ukuran default auto. Item ditempatkan di jalur
"a".
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Cara ini berfungsi sama baik saat Anda menentukan baris atau kolom; satu-satunya
perbedaan adalah properti masonry-direction.
Dengan display: grid
Untuk kolom, sintaksisnya pada dasarnya identik. Demikian pula, karena tidak ada ukuran
jalur yang ditentukan, ketiga jalur akan menggunakan ukuran default auto, tetapi Anda tetap perlu
menyatakan secara eksplisit bahwa sumbu lainnya adalah tata letak masonry:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Namun, untuk baris, nilai harus ditulis secara berbeda, karena
grid-template-areas sebenarnya menentukan area dua dimensi, dan setiap baris
ditulis sebagai string terpisah:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Poin yang perlu dipertimbangkan antara kedua opsi
Dengan posisi apa pun, sintaksis display: masonry berfungsi lebih baik dalam hal
mengubah arah. Karena properti masonry-track-* berfungsi di arah mana pun yang menjadi sumbu petak, Anda hanya perlu mengubah nilai masonry-direction untuk mengubah arah. Dengan versi petak, setidaknya Anda memerlukan properti redundan untuk mengaktifkan peralihan. Namun, lihat contoh sebelumnya untuk mengetahui cara lain yang membuat perubahan arah lebih rumit dengan versi petak.
Singkatan
Dalam postingan ini, versi panjang telah digunakan untuk memperjelas properti mana yang sedang digunakan, tetapi versi display: masonry dan display: grid dapat ditentukan menggunakan versi singkat.
Dengan display: masonry
Singkatan display: masonry menggunakan kata kunci masonry. Untuk membuat tata letak
masonry dasar, gunakan CSS berikut:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Untuk membuat tata letak masonry berbasis baris sederhana:
.masonry {
display: masonry;
masonry: row;
}
Untuk menentukan jalur dan tata letak berbasis baris dengan singkatan:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Dengan display: grid
Untuk membuat tata letak masonry dasar menggunakan singkatan grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Untuk membuat tata letak masonry berbasis baris sederhana:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
Dalam contoh yang lebih kompleks, karena sintaksis display:masonry secara keseluruhan lebih sederhana, lebih banyak properti dapat digabungkan ke dalam singkatan tanpa menjadi terlalu rumit.
Misalnya, bayangkan Anda membuat tiga kolom, yang diberi nama "a", "b", dan "c", yang diisi dari bawah ke atas.
Dengan display:masonry
Di display: masonry, ketiga hal ini dapat ditetapkan bersama dalam singkatan:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Karena ukurannya otomatis, Anda tidak perlu menentukan ukuran, tetapi jika Anda menginginkan ukuran tertentu, ukuran tersebut dapat ditambahkan. Contoh: masonry: column-reverse 50px 100px 200px "a b c";
Selain itu, setiap komponen dapat diurutkan ulang secara bebas; tidak ada urutan tertentu yang
perlu Anda ingat. Jika Anda ingin melakukan baris, yang perlu Anda lakukan adalah
menukar column-reverse dengan row atau row-reverse; sintaksis lainnya tetap
sama.
Dengan display: grid
Di display: grid, ketiga aspek ini harus ditetapkan secara terpisah:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Seperti contoh tata letak bata, hal ini membuat semua kolom berukuran auto, tetapi jika Anda ingin memberikan ukuran eksplisit, Anda dapat melakukannya:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Atau jika Anda ingin menggunakan 'grid' untuk menetapkan ukuran dan nama area secara bersamaan:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
Dalam kedua contoh ini, urutan sangat diperlukan, dan berbeda jika Anda menginginkan baris. Misalnya, perubahan ke baris akan terlihat seperti:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Atau, untuk menyatukan semuanya dalam satu singkatan:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Poin yang perlu dipertimbangkan antara kedua opsi
Singkatan display: masonry kemungkinan akan banyak digunakan, mengingat singkatan ini relatif mudah. Dalam banyak kasus, untuk tata letak petak "standar", Anda hanya perlu menetapkan definisi jalur; semua nilai lainnya dapat menggunakan nilai default.
Versi display: grid menggunakan singkatan
grid yang sudah ada, yang merupakan
singkatan yang cukup rumit, dan menurut pengalaman kami, jarang digunakan oleh
developer. Seperti yang ditunjukkan dalam contoh sebelumnya, meskipun digunakan untuk tata letak
masonry sederhana, Anda harus berhati-hati saat menetapkan urutan nilai.
Pertimbangan lainnya
Postingan ini membahas beberapa kasus penggunaan umum saat ini, tetapi kita tidak tahu apa yang akan terjadi pada tata letak petak atau masonry di masa mendatang. Alasan utama penggunaan sintaksis display: masonry terpisah adalah agar keduanya dapat berbeda di masa mendatang. Khususnya dengan nilai awal—seperti untuk masonry-template-tracks—mungkin berguna untuk melakukan sesuatu yang berbeda di tata letak masonry daripada tata letak petak. Kita tidak dapat mengubah default petak jika menggunakan versi display: grid, hal ini dapat membatasi hal-hal yang mungkin ingin kita lakukan di masa mendatang.
Dalam contoh ini, Anda dapat melihat tempat saat browser harus mengabaikan properti yang valid dalam petak jika menggunakan tata letak bata.
Misalnya grid-template-areas, yang sebagian besar nilainya
dihapus karena menentukan tata letak petak dua dimensi, dalam tata letak masonry, kita hanya
menentukan satu arah sepenuhnya.
Berikan masukan Anda
Lihat contoh ini, dan juga draf spesifikasi yang memaparkan setiap versi secara berdampingan. Beri tahu kami pendapat Anda dengan memberikan komentar di Masalah 9041 atau, jika Anda lebih suka menulis postingan di blog Anda sendiri atau di media sosial, pastikan untuk memberi tahu kami di X atau LinkedIn.