Grid CSS: Peratusan lwn. Unit `fr`: Mana Yang Perlu Saya Gunakan?

Peratusan vs. Unit Fr dalam Reka Letak Grid CSS

Memahami Unit fr

Fungsi: Unit Fr memperuntukkan ruang kosong dalam a bekas.

Pengiraan: Ruang kosong (selepas menolak jurang grid) dibahagikan sama rata antara lajur fr.

Memahami Peratusan (%) Unit

Fungsi: Mentakrifkan lebar lajur sebagai peratusan daripada lebar.

Pengiraan: Lebar lajur ditentukan dengan membahagikan jumlah lebar dengan bilangan lajur, termasuk lebar mana-mana jurang grid.

Perbezaan: Limpahan lwn . Pengagihan

Peratusan: Lajur boleh melimpah di luar lebar kontena disebabkan oleh panjang unit tetap dan jurang grid.

Fr: Lajur hanya mengambil ruang kosong dalam bekas, tidak melampauinya. Jurang grid tidak memberi kesan kepada peruntukan ruang kosong.

Menggunakan Peratusan dengan Jurang Grid

Untuk mengelakkan limpahan dengan lebar peratusan, tolak jumlah lebar jurang grid daripada lebar bekas penuh sebelum dibahagi dengan bilangan lajur:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

di mana:

• 8.3333% ialah peratusan lebar setiap lajur tanpa jurang
• 9.1667px ialah jumlah lebar 11 jurang grid ( 10px setiap satu)

Dengan menggunakan nilai yang sesuai untuk lebar peratusan atau melaksanakan unit fr, anda boleh mengurus saiz lajur dan mengelakkan limpahan dalam Reka Letak Grid CSS.

Atas ialah kandungan terperinci Grid CSS: Peratusan lwn. Unit `fr`: Mana Yang Perlu Saya Gunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!