Apakah Perbezaan Utama Antara Unit `fr` dan Peratusan dalam Reka Letak Grid CSS untuk Lebar Lajur?

Perbezaan Antara Peratusan dan Unit fr dalam Tata Letak Grid CSS

Apabila menggunakan Tata Letak Grid CSS, adalah penting untuk memahami perbezaan antara unit peratusan dan fr dalam menentukan lebar daripada lajur.

fr Unit

Unit fr mewakili "unit pecahan", dan ia berfungsi hanya dengan ruang kosong yang terdapat dalam bekas. Apabila menggunakan unit fr, penyemak imbas mengira lebar setiap lajur berdasarkan ruang yang tinggal selepas mengambil kira jurang grid.

Sebagai contoh, dalam kod di bawah, bekas grid dibahagikan kepada 12 lajur, setiap satu mengambil ruang kosong yang sama dalam bekas:

grid-template-columns: repeat(12, 1fr);

Peratusan Unit

Unit peratusan, sebaliknya, mentakrifkan lebar setiap lajur sebagai peratusan daripada jumlah lebar bekas. Ini bermakna lebar setiap lajur dikira berdasarkan lebar sebenar bekas.

Sebagai contoh, dalam kod di bawah, setiap lajur mempunyai lebar 8.33333%, iaitu 100% dibahagikan dengan 12:

grid-template-columns: repeat(12, calc(100% / 12));

Mengapa Peratusan Menyebabkan Lajur Limpahan

Perbezaan utama antara unit fr dan peratusan ialah cara mereka mengendalikan jurang grid. Dengan unit fr, jurang grid ditolak daripada ruang kosong bekas sebelum lebar lajur dikira. Ini memastikan lajur tidak melimpahi lebar bekas.

Walau bagaimanapun, dengan unit peratusan, jurang grid ditambahkan pada lebar lajur. Ini bermakna walaupun jumlah lebar lajur mungkin sama dengan 100%, penambahan jurang grid boleh menyebabkan lajur melimpahi lebar bekas.

Untuk menyelesaikan isu ini, anda boleh menggunakan unit fr. atau laraskan pengiraan peratusan untuk mengambil kira jurang grid.

Atas ialah kandungan terperinci Apakah Perbezaan Utama Antara Unit `fr` dan Peratusan dalam Reka Letak Grid CSS untuk Lebar Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!