CSS Grid Level 3, alias layout "Masonry", meminta bantuan untuk merancangnya

• Proposal sedang berjalan untuk menambahkan layout Masonry pada CSS Grid ke CSS Grid Level 3

  • Layout Masonry adalah pola yang mengisi konten dengan rapat seperti susunan bata atau gaya air terjun, sehingga konten dengan ukuran berbeda dapat ditempatkan tanpa dipotong atau dihilangkan, sambil mengalirkan isi per kolom
  • Ini adalah layout yang selama ini sulit diwujudkan hanya dengan CSS tanpa JavaScript

• Mereka membuat 4 demo untuk mengimplementasikan mekanisme Masonry di CSS

  • Membuat layout Masonry/gaya air terjun klasik
  • Memanfaatkan berbagai fitur definisi kolom pada Grid
  • Memanfaatkan fitur penggabungan kolom pada Grid
  • Menggunakan Subgrid dan penempatan eksplisit

• Menggabungkan berbagai fitur Grid dan Masonry memungkinkan implementasi layout yang jauh lebih kreatif dan dinamis

  • Mendefinisikan ukuran kolom yang fleksibel dan beragam dengan satuan fr, max-content, min-content, fungsi minmax(), dan lainnya
  • Menonjolkan item tertentu atau menyusun grid yang lebih berwarna dengan penggabungan kolom
  • Menyelaraskan track nested grid dengan induknya menggunakan Subgrid
  • Menentukan posisi item tertentu seperti header dengan penempatan eksplisit

• Ada juga pendapat bahwa layout Masonry harus dipisahkan sebagai tipe display tersendiri

  • Ada kekhawatiran bahwa menggabungkan CSS Grid dan Masonry akan meningkatkan kompleksitas dan berdampak negatif pada performa
  • Jika Masonry dipisahkan dari Grid, masing-masing fitur dapat berkembang secara mandiri
  • Namun ada juga pendapat agar Masonry hanya diimplementasikan sebagai layout kolom dengan ukuran seragam yang terbatas

• Penulis menilai memasukkan fitur Masonry ke CSS Grid memiliki lebih banyak keunggulan

  • Spesifikasi CSS Grid Level 3 sudah ditulis dan telah diimplementasikan pada 2 mesin browser
  • Ke depan, fitur baru yang sama dapat disediakan untuk Grid dan Masonry sekaligus (misalnya: styling track)
  • Masonry juga merupakan salah satu jenis Grid, sehingga secara konseptual sangat cocok

• Ingin mendengar pendapat para web designer dan developer

  • Haruskah Masonry menjadi bagian dari CSS Grid?
  • Apakah Anda ingin bisa memanfaatkan semua fitur Grid seperti definisi ukuran kolom yang beragam, penggabungan kolom, penempatan, Subgrid, dan lain-lain? Atau lebih baik hanya mendukung kolom berukuran sama?
  • Bagaimana Anda akan menggunakan fitur ini? Layout seperti apa yang bisa dibuat?
  • Jika ada demo buatan sendiri, mohon dibagikan
  • Apakah ada layout yang sulit diimplementasikan dengan model ini?

• Nama Masonry mungkin kurang tepat. Sintaks seperti grid-template-rows: off patut dipertimbangkan untuk menyampaikan makna menghilangkan baris. Harap diingat bahwa namanya dapat berubah di masa depan

Opini GN⁺

• Menambahkan fitur Masonry ke CSS Grid tampak sebagai perubahan bermakna yang dapat sangat meningkatkan daya ekspresi layout web. Terutama menarik karena grid berbasis kolom yang hanya mengalir ke arah kolom akan menjadi jauh lebih mudah diimplementasikan
• Di sisi lain, sulit untuk setuju dengan pendapat bahwa Masonry harus dipisahkan sebagai tipe display tersendiri dan fiturnya dibatasi. Justru ketika digabungkan dengan fitur-fitur kuat Grid, cakupan pemanfaatan layout Masonry tampaknya akan menjadi jauh lebih luas
• Namun nama Masonry memang kurang intuitif dan bisa menimbulkan kebingungan, sehingga ada baiknya mempertimbangkan nama lain yang menunjukkan grid khusus kolom. Sintaks seperti grid-template-rows: none tampaknya lebih baik karena menyampaikan arti "grid tanpa baris" dengan lebih jelas
• Proposal ini diharapkan dapat menjadikan CSS Grid alat yang lebih kuat lagi. Penting untuk bereksperimen dengan berbagai contoh layout dan secara aktif menyampaikan pendapat

[GN⁺]

Komentar Hacker News

Ringkasan:

• CSSWG dan tim DevRel dari vendor browser telah mendiskusikan sejak 2020 bagaimana memasukkan layout Masonry secara resmi ke dalam CSS
  • Tim WebKit memutuskan untuk membuka diskusi ini ke publik guna meminta masukan dari desainer dan pengembang
  • Ini akan menjadi preseden penting, sekaligus perdebatan mendasar tentang apakah semua opsi layout harus diperlakukan sebagai bagian dari CSS Grid atau apakah properti CSS Display baru harus terus ditambahkan sesuai kebutuhan
• Mengibaratkan layout Masonry dengan susunan batu bata memang menarik, tetapi jika batu bata sungguhan disusun seperti itu hasilnya akan menjadi bencana rekayasa struktur
• Demo megamenu adalah contoh penggunaan layout Masonry yang tidak tepat, karena merusak alur baca dan sangat meleset dari ekspektasi
  • Pengguna tunanetra akan selalu membacanya dalam urutan yang "salah"
  • Seharusnya diimplementasikan sebagai kolom menggunakan break-inside: avoid
• Demo surat kabar juga agak meragukan karena alasan yang serupa
• Untuk gambar atau media dalam blok yang berdiri sendiri, layout Masonry bekerja lebih baik
• Karena demo-demo ini berbasis layout grid, di browser yang tidak mendukung pun tampil sebagai format baris tetap yang masuk akal
• Menyukai nuansa umum dari layout Masonry/Waterfall
  • Namun akan lebih baik jika ada layout yang lebih mempertahankan alur baca kiri-ke-kanan dibanding metode perataan Masonry bawaan
• Ada pemikiran tentang cara merancang sistem layout yang bisa menggantikan CSS
  • Ingin tahu apakah sistem yang benar-benar diimplementasikan seperti Qt, Tk, SwiftUI, dan lain-lain memiliki kelebihan yang lebih baik
  • Bagaimana cara menyediakan antarmuka yang lebih baik bagi pengembang?
• Memperkenalkan contoh penerapan efek Masonry di situs foto pribadinya tanpa JS
  • Menggunakan display:inline-block untuk memperlakukan foto seperti teks agar melakukan reflow ke baris baru
  • Hasilnya lebih memuaskan dibanding pustaka Masonry
• Sudah ada Flexbox dan layout Grid, sehingga dipertanyakan apakah menambahkan lebih banyak opsi "layout" ke CSS memang langkah yang tepat
  • Solusi yang lebih baik mungkin adalah membuat sistem berbasis constraint yang final, meskipun kompleks, untuk menangani semua kasus layout
• Senang melihat tim WebKit kembali melakukan pekerjaan hebat secara terbuka