Mengapa Grid CSS Tidak Mencukupi untuk Reka Letak Batu

Kaedah yang mudah digunakan untuk melaksanakan reka letak batu telah lama dicari oleh komuniti pembangun web. Sukar untuk mencipta grid dinamik estetik ini hanya menggunakan CSS, terima kasih kepada Pinterest dan reka bentuk yang berkaitan. Pasukan Chrome berpendapat bahawa strategi ini mungkin bukan yang terbaik, walaupun cadangan terkini yang memerlukan keupayaan batu untuk ditambahkan pada spesifikasi Reka Letak Grid CSS. Berikut ialah beberapa sebab mengapa kami berpendapat batu harus mempunyai teknik reka letaknya sendiri dan beberapa potensi kelebihan untuk pembangun.

Kes Menentang Menambah Batu pada Grid CSS

1. Kebimbangan Prestasi

Susun atur Grid CSS dan batu mengendalikan peletakan item dengan cara yang berbeza secara asas:

• Grid CSS: Semua item diletakkan sebelum reka letak, membolehkan penyemak imbas mengira saiz dan peletakan trek yang tepat.
• Masonry: Item diletakkan semasa ia dibentangkan, memerlukan pengiraan dinamik yang boleh membawa kepada isu prestasi yang ketara apabila mencampurkan saiz trek tetap dan intrinsik.

Pertimbangkan grid dengan definisi trek bercampur seperti lajur-templat grid: 200px auto 200px. Dengan batu, penyemak imbas mesti pra-reka letak setiap item dalam setiap konfigurasi yang mungkin, mewujudkan kerumitan eksponen dalam grid besar. Ini amat bermasalah apabila menggunakan ciri lanjutan seperti subgrid.

Untuk mengelakkan penghantaran kaedah reka letak dengan pengehadan yang wujud, kami mencadangkan penyelesaian yang memisahkan batu daripada Grid CSS.

2. Kerumitan Spesifikasi

Menggabungkan batu ke dalam spesifikasi grid memperkenalkan ketidakkonsistenan yang bercanggah dengan prinsip teras konteks pemformatan:

• Sifat Penjajaran: Grid menyokong enam sifat penjajaran, tetapi batu hanya akan menggunakan subset, seperti flexbox.
• Sifat Peletakan: Grid mempunyai empat sifat peletakan (cth., grid-lajur-mula), manakala batu hanya memerlukan dua.
• Saiz Jejak: Corak tertentu seperti lajur-templat grid: ulangi(isi automatik, kandungan maksimum) masuk akal dalam batu tetapi mesti kekal tidak sah dalam grid.

Memperkenalkan percanggahan ini meningkatkan beban kognitif untuk pembangun, kerana mereka perlu mengingati ciri yang berfungsi dalam konteks mana. Pemecahan ini boleh menyebabkan kekeliruan dan ralat.

Cadangan: Masonry sebagai Kaedah Susun Asing

Daripada menggabungkan batu dengan Grid CSS, kami menyokong untuk mentakrifkannya sebagai kaedah reka letak kendiri menggunakan paparan: batu. Pendekatan ini mengekalkan semua fleksibiliti yang digemari oleh pembangun tentang grid sambil mengelakkan perangkap yang digariskan di atas.

Contoh

Susun Letak Batu Klasik

Susun atur batu mudah dengan lajur bersaiz sama boleh dicapai dengan:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Saiz Trek Campuran

Untuk reka letak dengan lajur sempit dan lebar berselang-seli:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Runut Bersaiz Auto

Benarkan trek untuk saiz automatik berdasarkan kandungan:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

Span dan Peletakan

Dayakan item untuk menjangkau berbilang trek:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

Faedah Susun Atur Batu Berasingan

Kejelasan: Pembangun boleh menggunakan batu tanpa perlu risau tentang nuansa keserasian Grid CSS.

Fleksibiliti: Semua ciri seperti grid kekal tersedia tanpa memperkenalkan kekangan baharu.

Pembuktian Masa Depan: Spesifikasi batu khusus memastikan gelagat yang konsisten merentas pelayar dan mengelakkan kerumitan yang tidak perlu.

Atas ialah kandungan terperinci Mengapa Grid CSS Tidak Mencukupi untuk Reka Letak Batu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!