Masukan diperlukan: Bagaimana kita harus mendefinisikan masonry CSS?

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

Dipublikasikan: 19 September 2024

CSS Working Group telah menggabungkan dua proposal masonry CSS menjadi satu draf spesifikasi. Grup ini berharap hal ini akan mempermudah perbandingan keduanya, dan membuat keputusan akhir. Tim Chrome masih yakin bahwa sintaksis masonry terpisah akan menjadi cara terbaik untuk melanjutkan. Meskipun masalah performa terbesar yang disebutkan dalam postingan sebelumnya telah teratasi, masih ada masalah seputar sintaksis, nilai awal, dan kemudahan mempelajari versi yang digabungkan dengan petak.

Namun, untuk menguji asumsi kami, kami telah mengerjakan beberapa contoh untuk menunjukkan cara kerja masonry dengan setiap versi. Lihat contoh dalam postingan ini dan berikan masukan Anda, sehingga kami dapat membuat keputusan dan melanjutkan fitur ini.

Postingan ini tidak mencakup semua kemungkinan kasus penggunaan, tetapi jelas bahwa memisahkan masonry dari tata letak petak tidak akan menyebabkan fitur tersebut tidak memiliki fungsi. Bahkan, yang benar 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 pengurutan ulang item dengan masonry yang menyebabkan masalah aksesibilitas. Hal ini juga ditangani untuk kedua versi sintaksis, melalui properti reading-flow yang diusulkan.

Tata letak masonry dasar

Ini adalah tata letak yang dibayangkan sebagian besar orang saat memikirkan pasangan bata. Item ditampilkan dalam baris, dan setelah baris pertama ditempatkan, item berikutnya akan berpindah ke spasi 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 lain. Item pertama ditampilkan di awal blok dan inline (sehingga kiri atas dalam bahasa Inggris), dan item ditata dalam arah inline.

Untuk menentukan jalur, gunakan masonry-template-tracks dengan nilai daftar lagu 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.

Tindakan ini akan membuat tata letak seperti yang Anda harapkan dengan item petak yang ditempatkan secara otomatis, tetapi item di setiap baris menggunakan tata letak masonry dan akan disusun 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 dengan versi display: masonry, Anda mendapatkan tata letak masonry meskipun tidak menentukan jalur apa pun dengan masonry-template-tracks. Oleh karena itu, display: masonry mungkin saja yang Anda butuhkan. Hal ini karena nilai awal masonry-template-tracks adalah repeat(auto-areas, auto). Tata letak membuat trek berukuran otomatis sebanyak yang cocok dengan penampung.

Aliran terbalik dengan masonry

Spesifikasi ini mencakup cara untuk mengubah arah alur masonry. Misalnya, Anda dapat mengubah alur yang akan ditampilkan dari akhir blok.

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 saat ini ditentukan, grid-auto-flow: row-reverse dan grid-auto-flow: column-reverse akan memberikan efek yang sama. Hal ini dapat membingungkan, karena Anda mungkin mengharapkannya 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 jalur karena defaultnya adalah auto, sehingga jalur akan disesuaikan dengan konten yang dikandungnya.

.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 flow terbalik, mengubah versi display: masonry dari kolom menjadi baris, berarti mengubah nilai masonry-direction. Dengan versi petak, Anda harus mengganti nilai properti grid-template-columns dan grid-template-rows. Atau, jika menggunakan singkatan, ubah urutan sintaksis.

Dengan kedua contoh alur pengalihan ini, versi display: masonry terasa lebih intuitif. Ada satu properti yang mengontrol alur masonry-direction, yang menggunakan salah satu nilai berikut:

• row
• column
• row-reverse
• column-reverse

Kemudian, Anda menambahkan informasi ukuran yang diperlukan ke masonry-template-tracks, dengan asumsi bahwa nilai otomatis default bukan yang Anda butuhkan.

Dengan petak, untuk melakukan arah terbalik, Anda perlu menggunakan properti grid-auto-flow, dan untuk melakukan masonry baris, alihkan nilai properti grid-template-*. Dalam sintaksis petak saat ini, Anda juga tidak dapat membiarkan nilai untuk sumbu petak tidak ditentukan. Anda harus selalu menentukan properti grid-template-* pada sumbu yang tidak memiliki nilai masonry.

Memosisikan item

Dalam kedua versi, Anda dapat memosisikan item secara eksplisit menggunakan penempatan berbasis baris yang akan Anda kenal dari tata letak petak. Dalam 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. Oleh karena itu, sumbu petak adalah kolom. Item dengan class a ditempatkan dari baris kolom pertama ke baris kolom ketiga, yang mencakup dua jalur dengan properti masonry-track-* baru. Ini juga dapat ditentukan sebagai singkatan 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. Oleh karena itu, sumbu petak adalah kolom. Item dengan class a ditempatkan dari baris kolom pertama ke baris 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 baris bernama dengan kedua sintaksis tersebut. Contoh berikut menunjukkan petak dengan dua baris kolom bernama a.

Dengan display: masonry

Baris yang dinamai ditentukan dalam nilai daftar lagu masonry-template-tracks. Item dapat ditempatkan setelah baris apa pun yang bernama a.

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

Dengan display: grid

Baris yang dinamai ditentukan dalam nilai daftar lagu grid-template-columns. Item ditempatkan setelah baris pertama bernama a. Jika ditentukan, properti grid-row 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, ketiganya akan ditetapkan secara default ke ukuran auto. Item ditempatkan di jalur "a".

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

Cara kerjanya sama, baik saat Anda menentukan baris maupun 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, ketiganya akan ditetapkan secara default ke ukuran auto, tetapi Anda masih perlu mengatakan secara eksplisit bahwa sumbu lainnya adalah 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 saat beralih arah. Karena properti masonry-track-* berfungsi dalam arah mana pun yang merupakan sumbu petak, yang perlu Anda lakukan untuk mengubah arah adalah mengubah nilai masonry-direction. Dengan versi petak, setidaknya Anda memerlukan properti redundan untuk mengaktifkan pengalihan. Namun, lihat contoh sebelumnya untuk mengetahui cara lain mengubah arah yang lebih rumit dengan versi grid.

Singkatan

Dalam postingan ini, longhand telah digunakan untuk memperjelas properti mana yang digunakan, tetapi versi display: masonry dan display: grid dapat ditentukan menggunakan singkatan.

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 yang 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 yang 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 dikemas bersama ke dalam singkatan tanpa menjadi terlalu rumit.

Misalnya, bayangkan membuat tiga kolom, bernama "a", "b", dan "c", yang diisi dari bawah ke atas.

Dengan display:masonry

Di display: masonry, ketiganya 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 ingin 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. Dan 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 masonry, tindakan ini akan membuat semua kolom berukuran auto, tetapi jika Anda ingin menyediakan 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 'petak' 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 ingin baris. Misalnya, mengubah ke baris akan terlihat seperti:

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

Atau, untuk menggabungkan semuanya menjadi 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 ini adalah singkatan yang relatif mudah. Sering kali, untuk tata letak masonry "standar", Anda hanya akan menetapkan definisi jalur; semua nilai lainnya dapat mengasumsikan default.

Versi display: grid menggunakan singkatan grid yang ada, yang merupakan singkatan yang cukup rumit, dan menurut pengalaman kami, jarang digunakan oleh developer. Seperti yang ditunjukkan pada 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 masa mendatang untuk petak atau batu bata. Argumen besar untuk menggunakan sintaksis display: masonry terpisah adalah memungkinkan keduanya berbeda di masa mendatang. Secara khusus dengan nilai awal—seperti yang digunakan untuk masonry-template-tracks—mungkin berguna untuk melakukan sesuatu yang berbeda dalam masonry daripada petak. Kita tidak dapat mengubah setelan 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 browser harus mengabaikan properti yang valid dalam petak jika menggunakan masonry. Misalnya grid-template-areas, tempat sebagian besar nilai dihapus karena menentukan tata letak petak dua dimensi, dalam masonry kita hanya menentukan satu arah sepenuhnya.

Berikan masukan Anda

Lihat contoh ini, dan juga draf spesifikasi yang menyusun setiap versi bersama versi lainnya. Beri tahu kami pendapat Anda dengan memberikan komentar pada 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.