Grid tersirat, corak susun atur berulang, dan dangler

Kes spesifik adalah apabila grid susun atur menjangkakan bilangan item yang lebih baik, tetapi sebenarnya menyediakan bilangan item yang ganjil. Unsur terakhir "lapar" yang terakhir akan memusnahkan susun atur. Ini memerlukan beberapa CSS pertahanan, Dave melakukannya.

Dia menulis pemilih ringkas menggunakan: mempunyai () untuk mencari item terakhir dalam grid yang mengandungi nombor ganjil item:

bekas induk yang dipanggil .items.

Jika bekas: mempunyai () elemen kanak -kanak, ia adalah yang terakhir dari jenisnya,

... dan .item menjadi contoh yang ganjil,

... kemudian pilih elemen pertama.

Dalam kes ini, yang terakhir .item boleh ditetapkan ke lebar penuh untuk mencegah jurang dalam susun atur.

Jika ... maka ... CSS mempunyai keupayaan logik bersyarat! Pada masa ini kami hanya bercakap mengenai Safari TP dan Sokongan Canary Edge/Chrome, tetapi ini sudah hebat.

Ia berlaku bahawa Temani Afif baru -baru ini berkongsi petua yang dia pelajari ketika menggunakan mesh tersirat untuk percubaan. Dengan memanfaatkan algoritma penempatan automatik CSS Grid, kami tidak perlu secara jelas mengisytiharkan bilangan lajur dan baris tetap untuk grid - CSS akan membuatnya untuk kami jika perlu!

Tidak, trik Temani bukanlah alternatif kepada teka -teki "lapar" Dave. Walau bagaimanapun, menggabungkan pendekatan Temani untuk mod susun atur mesh yang berulang dengan penggunaan CSS pertahanan Dave: telah (), kami mendapat mesh yang kuat dan rumit yang ringan dan mampu mengendalikan beberapa item sambil mengekalkan mod berulang yang seimbang.

Atas ialah kandungan terperinci Grid tersirat, corak susun atur berulang, dan dangler. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!