Langkah pertama ke dalam susun atur batu CSS yang mungkin

Walaupun tidak begitu popular sebagai pertanyaan kontena, CSS secara asli menyokong susun atur "Masonry" selalu menjadi ciri yang diharapkan oleh pemaju CSS. Susun atur batu merujuk kepada unsur -unsur saiz yang berbeza -beza dan disusun dalam barisan yang tidak rata, yang agak seperti dinding bata yang diletakkan di sebelah.

CSS sendiri boleh melaksanakan susun atur ini, tetapi terdapat batasan yang besar: item tidak disusun mengikut baris, tetapi oleh lajur, yang sering sukar untuk memenuhi keperluan.

 <code>/* 通常人们不想要这种排列方式*/ 1 4 6 8 2 7 3 5 9</code>

 <code>/* 他们想要这种排列方式* 1 2 3 4 5 6 7 8 9</code>

Jika anda ingin mengatur kedua -dua baris yang tidak sekata dan mengekalkan urutan kod sumber mendatar, anda hanya boleh menggunakan JavaScript. Tetapi perkara telah berubah sekarang, Firefox memperkenalkan ciri ini dengan bendera ciri dalam edisi malam sebagai sebahagian daripada grid CSS.

Mats Palmgren berkata:

Pelaksanaan cadangan ini kini boleh didapati di Firefox setiap malam. Ia dilumpuhkan secara lalai, jadi anda perlu memuatkan: Konfigurasi dan tetapkan susun atur keutamaan.

Jen Simmons telah mencipta beberapa demo:

Adakah ini benar -benar susun atur grid?

Rachel Andrew mengemukakan beberapa soalan mengenai ini ...

Susun atur grid bukan susun atur batu kerana ia adalah grid dengan baris dan lajur yang ketat. Jika anda melihat susun atur yang dibuat oleh susun atur batu sekali lagi, kami akan mendapati bahawa ia tidak mempunyai baris dan lajur yang ketat. Biasanya kita telah menentukan baris, tetapi lajur bertindak lebih seperti susun atur flex atau multicol. Perbezaan utama antara susun atur multicol dan susun atur batu ialah dalam multicol, item dipaparkan dalam lajur. Dalam susun atur batu, mereka biasanya dikehendaki dipaparkan dengan baris.

[...]

Secara peribadi, saya tidak menyukainya sebagai sebahagian daripada spesifikasi grid. Ia kelihatan menarik pada pandangan pertama, tetapi saya fikir ia adalah corak susun atur yang agak profesional, yang sebenarnya bukan susun atur grid sama sekali. Ia lebih serupa dengan susun atur flex daripada susun atur grid.

Dengan meletakkan kaedah susun atur ini ke dalam spesifikasi grid, saya bimbang bahawa kita perlu menyokong fungsi batu apabila membuat penambahan lain ke grid.

Semua ini belum dimuktamadkan dan sedang dibincangkan secara aktif oleh Kumpulan Kerja CSS.

Seperti kata Jen:

Ini adalah pelaksanaan eksperimen - dibincangkan sebagai spesifikasi CSS yang mungkin . Ia belum rasmi dan mungkin berubah. Jangan menulis catatan blog yang mengatakan ia pasti satu perkara. Belum. Belum. Ia adalah percubaan. Prototaip. Jika anda mempunyai idea, sila hantarkan komen anda di CSSWG.

Houdini?

Kali terakhir saya membincangkan susun atur Masonry Native, ia bercampur dengan idea bahawa API susun atur CSS (sebagai sebahagian daripada Houdini) dapat mencapai ini. Seperti yang anda lihat apabila anda membuka demo ini (repositori) di Chrome Canary, ini adalah ciri.

Saya tidak faham sepenuhnya sama ada Houdini dimaksudkan untuk menjadi ciri supaya idea -idea seperti ini dapat prototaip dalam penyemak imbas dan akhirnya dikeluarkan dari Houdini, atau sama ada idea -idea itu harus tinggal di Houdini, atau apa.

Atas ialah kandungan terperinci Langkah pertama ke dalam susun atur batu CSS yang mungkin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!