CSS Masonry dan CSS Grid – Beragampengetahuan

Cara membuat tata letak batu di vanilla CSS adalah salah satu aspirasi “cawan suci” ini. Faktanya, saya cenderung menempatkan tata letak batu dan tata letak “cawan suci” klasik di era desain web yang sama. Tentu saja, jenis tata letaknya berbeda-beda, tetapi cawan sucinya selesai ketika kita mendapatkan CSS Grid.

Hal ini menjadikan Masonry mungkin tata letak terakhir di era CSS 3 tanpa solusi bawaan. Saya mungkin mengatakan bahwa pekerjaan tukang batu sudah tidak ada lagi Kepopuleran Cukuplah dikatakan, tetapi jelas ada kasus penggunaan untuk mengemas item dengan ukuran berbeda ke dalam kolom berdasarkan ruang yang tersedia. Arsitektur pasangan bata masih primitif.

Steam sedang mengerjakan solusi formal. Kami bahkan memiliki rancangan spesifikasi CSSWG untuk itu. Namun perhatikan bagaimana draf tersebut mengatasi masalah tersebut.

Sintaks integrasi grid? Sintaks yang tidak bergantung pada jaringan? Kami telah menyelesaikan dan menambahkan CSS!

Inilah latar belakang catatan ini. Pada saat penulisan artikel ini, ada dua proposal yang bersaing untuk CSS Masonry, dan banyak pendapat yang mendukung salah satu proposal tersebut. Saya punya pemikiran pribadi tentang ini, tapi itu tidak masalah. Apapun konsensus yang tercapai, saya akan senang. Kedua proposal tersebut memiliki manfaat, namun juga potensi tantangan – tergantung pada apa yang Anda prioritaskan, yang dalam hal ini menurut saya adalah antara memanfaatkan ergonomi kemampuan tata letak CSS yang ada dan memilih pendekatan yang benar-benar baru.

Namun mari kita ambil beberapa catatan dari diskusi yang telah berlangsung untuk membantu memahami segala sesuatunya dengan lebih jelas!

Apa itu tata letak pasangan bata?

Anggap saja seperti membangun tembok dari batu atau bata.

Ukuran batu bata dan batu tidak menjadi masalah – kolom (atau yang lebih umum, baris) adalah faktor utama dalam mengubah ukuran objek. Kemas batu atau bata sebanyak mungkin ke dalam kolom terdekat dan sesuaikan dengan lebar kolom. Atau lebih ringkasnya, kita menempatkan barang-barang yang berukuran tidak sama dalam sebuah kolom sehingga tidak ada celah yang tidak rata di antara barang-barang tersebut.

Tolong beri contoh?

Berikut ini mungkin contoh paling umum di CodePen, yang disediakan oleh Dave DeSandro, menggunakan alat Masonry.js miliknya:

Saya menggunakan contoh ini karena, jika saya ingat dengan benar, Masonry.js adalah pendorong tren pasangan bata pada tahun 2010 atau semacamnya. Dave menerapkannya di situs web Beyoncé, yang tentu saja memberikan gambaran yang sangat terlihat pada pasangan bata tersebut. Terkadang Anda mungkin mendengar pasangan bata disebut sebagai tata letak “gaya Pinterest” karena itulah desain khas situs tersebut dan bahkan mungkin mereknya sejak hari pertama.

Berikut contoh palsu yang dibuat Jhey menggunakan Flexbox:

Chris juga merangkum serangkaian solusi lain di tahun 2019 yang memungkinkan kami mencapai tujuan tertentu dalam kondisi ideal. Namun hal ini tidak didasarkan pada metode atau fungsi yang terstandarisasi. Maksud saya, kolom dan flexbox ditentukan, tetapi tidak dirancang dengan mempertimbangkan pasangan bata. Namun dengan rekam jejak penggunaan batu yang panjang, tentu saja ini layak mendapat tempat dalam spesifikasi CSS.

memiliki dua Proposal yang bersaing

Ini sebenarnya bukan berita. Faktanya, jika melihat ke belakang pada tahun 2020, kita bisa merasakan hal ini lebih awal. Rachel Andrew memperkenalkan konsep pasangan bata sebagai sub-fitur grid dalam sebuah artikel untuk Smashing Magazine.

Mari kita maju cepat ke tahun 2022. Kami menggabungkan rancangan editorial CSS Masonry ke dalam spesifikasi Modul 3 Tata Letak Kotak CSS. Jenn Simmons mengusulkan agar CSSWG mengajukan rancangan ini sebagai rancangan pekerjaan umum yang pertama. Lima hari kemudian, insinyur Chromium, Ian Kilpatrick, mengemukakan dua kekhawatiran tentang kemajuan sebagai bagian dari modul Tata Letak Kotak CSS, yang pertama terkait dengan penyesuaian rel kolom dan algoritme tata letak kotak:

Grid bekerja dengan menempatkan semuanya ke dalam grid terlebih dahulu dan kemudian mengubah ukuran baris/kolom agar sesuai dengan item. Masonry pada dasarnya tidak berfungsi dengan cara ini karena Anda perlu mengubah ukuran baris/kolom terlebih dahulu – dan kemudian menempatkan item di baris/kolom tersebut.

Jadi cara spesifikasi saat ini menggunakan kembali logika ukuran grid pada dasarnya akan menyebabkan hasil yang buruk ketika mengubah ukuran trek dan jika grid itu sendiri diubah ukurannya (misalnya jika berada di dalam grid/flex/table dll.).

Poin bagus! Grid menempatkan item grid terlebih dahulu sebelum mengubah ukurannya agar sesuai dengan ruang yang tersedia. Demikian pula dalam pasangan bata, ukuran kolom adalah segalanya. Logikanya, kita perlu mendeklarasikan pasangan bata terlebih dahulu dan mengonfigurasi dimensi lintasan kolom untuk menempatkan item sesuai dengan ruangnya. Masalah lainnya melibatkan aksesibilitas visual dan urutan membaca.

Hal ini membuat mosi draf status pekerjaan umum pertama Jenn menemui jalan buntu pada awal tahun 2023. Jika kita maju cepat ke bulan Juli tahun ini, kita memahami maksud Ian tentang jalur alternatif menuju pasangan bata. Hal ini didukung oleh berbagai pakar CSS, termasuk Rachel Andrew, penulis spesifikasi CSS Grid.

Dan, hanya tiga minggu yang lalu hari ini, fantasai membagikan rancangan proposal alternatif yang ditulis bersama Tab Atkins. Anda akan melihat bahwa proposal ini khusus untuk menjadikan pasangan bata sebagai modulnya sendiri.

Oleh karena itu, kami memiliki dua proposal yang bersaing untuk memecahkan masalah pasangan bata di CSS.

Studi kasus penggabungan pasangan bata dan jaringan

Mengumpulkan komentar dari tiket GitHub dan postingan blog…

Tujuan sebenarnya dari Flexbox adalah untuk mengatur dan mengalokasikan ruang kosong. Jadi tindakan awal mengatur semuanya adalah titik awal yang bagus untuk apa pun yang ingin Anda lakukan. Mungkin semua Apa yang perlu Anda lakukan. Sebagai seorang guru, tidak sulit untuk mengetahui cara menambahkan ruang di dalam atau di luar item, menyelaraskannya, atau menjadikannya kolom, bukan baris. Langkah demi langkah, dimulai dengan default.

Saya berharap saya bisa mengambil pendekatan yang sama display: masonry.

[…]

Kita tidak dapat melakukan ini dengan mudah menggunakan grid karena nilai awal yang sudah ada sebelumnya. Pengaturan default yang baik untuk mesh tidak berfungsi dengan baik untuk pasangan bata. Saat ini Anda membutuhkan:

1. Tambahkan ke display: griduntuk mendapatkan tata letak kotak satu kolom.
2. Tambahkan ke grid-template-columns: <track-listing>saat ini tidak ada cara untuk mengisi secara otomatis auto ukuran trek, jadi Anda perlu memutuskan berapa banyak. menggunakan grid-template-columns: repeat(3, auto)Misalnya.
3. Tambahkan ke grid-template-rows: masonry.
4. Ingin mendefinisikan baris? mengalihkan masonry nilai untuk diterapkan grid-template-columns Sekarang tentukan baris Anda. Sekali lagi, Anda harus mendefinisikan baris secara eksplisit.

Rachel Andrew, “Batu Bata dan Default yang Baik”

Terlepas dari itu, Rachel telah mengibarkan bendera tersebut setidaknya sejak tahun 2020. display: masonry Konfigurasi default yang membahas fungsionalitas dasar jelas dan menarik. Perilaku default harus sesuai dengan tujuan fitur, dan kisi bukanlah kumpulan konfigurasi default yang baik untuk digunakan dalam tata letak pasangan bata. Maksud Rachel adalah bahwa grid pengajaran untuk memahami perilaku pasangan bata tidak perlu menggabungkan dua konteks format yang berbeda, yang pasti akan menimbulkan kebingungan. Saya merasa sulit untuk membantah hal ini karena saya juga melihatnya dari sudut pandang pengajaran. Dari perspektif ini, kita dapat mengatakan bahwa fitur penggabungan adalah titik masuk lain yang hilang dalam pengembangan front-end.

Dalam beberapa tahun terakhir, dua metode utama yang kami gunakan untuk membuat tata letak pasangan bata adalah:

• Flexbox memungkinkan ukuran baris yang konsisten. kami menyesuaikan flex-basis Berdasarkan persentase item yang diharapkan dari total lebar baris.
• Grid membuat kolom berukuran seragam. Kami menetapkan rentang garis berdasarkan rasio aspek konten yang diharapkan, baik di sisi server untuk gambar atau di sisi klien untuk konten dinamis.

Apa yang saya amati secara pribadi adalah:

• Sebagai titik awal untuk pasangan bata, masing-masing terasa lebih intuitif dibandingkan yang lain. Jadi rasanya agak gatal untuk mengusulkan Grid sebagai basis saja.
• Meskipun ada kendala dalam mengajari orang kapan menggunakan Flexbox vs. Grid, ada gunanya bagi kontributor untuk fokus pada properti yang secara signifikan mengubah perilaku (mis. flex-wrap atau grid-auto-flow: dense).

Tyler Sticka, mengomentari GitHub Edisi #9041

Itu benar! Jika saya harus memilih flexbox apa pun atau Grid sebagai titik awal untuk pasangan bata (saya ragu cara mana yang akan saya pilih), saya mungkin condong ke arah Flexbox semata-mata karena perilaku default menyelaraskan item fleksibel dalam kolom.

Sintaks dan semantik CSS yang menggerakkan tata letak Masonry adalah hal yang terpisah dari mekanisme tata letak sebenarnya itu sendiri, dan agen pengguna masih dapat menggunakan kembali bagian dari mekanisme grid yang ada, termasuk subgrid, ketika diterapkan secara internal. Untuk kasus di mana pasangan bata disarangkan di dalam bingkai atau bingkai dirangkai di dalam pasangan bata, hubungan antara keduanya dapat dibuat secara eksplisit.

@jgotten, mengomentari GitHub Edisi #9041

Rachel berbicara lagi atas nama tim Chrome:

Ada dua alasan terkait mengapa menurut kami pasangan bata lebih baik didefinisikan di luar tata letak kisi-kisi: potensi masalah kinerja tata letak, dan fakta bahwa pasangan bata dan kisi-kisi memiliki fitur yang masuk akal dalam satu metode tata letak tetapi tidak masuk akal dalam metode tata letak lainnya. Fakta ini tidak terjadi pada fungsinya.

Kasus untuk memisahkan batu dari grid

Salah satu manfaat utama mengintegrasikan pasangan bata ke dalam tata letak kotak seperti Kasus 2) adalah kemampuan untuk memanfaatkan fitur grid yang ada seperti subgrid. Subgrid memungkinkan desain yang kohesif antar subelemen dalam grid, yang juga sangat diinginkan dalam banyak tata letak pasangan bata. Selain itu, saya yakin peningkatan tata letak jaringan di masa depan juga akan menguntungkan pasangan bata, sehingga integrasinya menjadi lebih berharga. Dengan memperlakukan Masonry sebagai perpanjangan dari Tata Letak Grid, pengembang akan dapat segera mulai menggunakannya tanpa harus mempelajari sistem yang benar-benar baru.

Kokomi, mengomentari GitHub Edisi #9041

Akan sangat disayangkan jika memisahkan pasangan bata dari kisi-kisi mencegah pasangan bata berfungsi sebagaimana mestinya ketika mengakses kumpulan fitur kisi:

Saya pikir argumen yang terpisah display: masonry Terlalu banyak fokus pada kesederhanaan dan mengorbankan fungsionalitas. Mengecualikan kekuatan Grid menghalangi pengembang yang menginginkan atau membutuhkan lebih dari sekedar tata letak dasar. Selain itu, memperkenalkan jenis tampilan lain dapat menyebabkan kebingungan dan fragmentasi ekosistem tata letak.

Angel Ponce, mengomentari GitHub Edisi #9041

Namun Rachel membantahnya.

Saya ingin menyatakan dukungan kuat saya untuk menambahkan pasangan bata ke show:grid. Fakta bahwa ia terdegradasi dengan baik ke jaringan tradisional merupakan keuntungan besar menurut saya. Selain itu, tata letak pasangan bata sudah dimungkinkan dalam tata letak kotak saat ini (dengan beberapa batasan)!

Naman Goel, Angel Ponce, komentari GitHub Edisi #9041

Sebelum perdebatan semakin besar dan memanas, Chris dengan lembut menyatakan minatnya untuk menggabungkan keduanya pada tahun 2020. Bukan sebuah dukungan yang kuat, tapi sebuah pengakuan bahwa hal itu mungkin masuk akal:

saya suka grid-template-rows: masonry; Sintaksnya, karena menurut saya ini menyampaikan dengan jelas: “Anda tidak mengatur susunan pemain itu. Faktanya, tidak ada lagi pertarungan nyata sama sekali dan kami akan menyelesaikannya.” Saya kira ini berarti tidak ada baris dalam subkisi yang dapat diwarisi, dan itu masuk akal.

Dimana kita?

Kumpulkan umpan balik. Rachel, Ian, dan Tabu telah bekerja sama untuk menarik orang-orang seperti Anda dan saya agar menambahkan ide-ide kita ke dalam tas. Saat tulisan ini dibuat, itu terjadi delapan hari yang lalu. Tidak hanya merupakan seruan untuk bertindak, tetapi juga merupakan gambaran yang sangat bagus tentang dua ide yang bersaing dan pertimbangan untuk masing-masing ide. Anda perlu menambahkan umpan balik ke GitHub Edisi #9041.

CSS Masonry dan CSS Grid awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.