Reka Letak Grid CSS: Peratusan lwn. Unit `fr` – Apakah Perbezaannya?

Perbezaan Antara Peratusan dan fr Unit dalam Reka Letak Grid CSS

Apabila mengkonfigurasi susun atur grid dengan CSS, pilihan unit untuk menentukan saiz lajur dan baris boleh memberi kesan kepada tingkah laku susun atur. Dua unit yang biasa digunakan ialah peratusan dan unit pecahan (fr). Mari kita periksa perbezaan utama antara unit ini dalam konteks Reka Letak Grid CSS.

Unit fr

Unit fr mewakili unit pecahan ruang kosong yang tersedia dalam bekas grid selepas mengambil kira jurang grid . Pada asasnya, ia membenarkan lajur atau baris mengambil jumlah yang berkadar daripada ruang yang tinggal. Ruang kosong diagihkan sama rata antara lajur atau baris dengan nilai fr.

Ini memastikan saiz elemen berskala responsif apabila bekas grid diubah saiz. Jurang grid, ditakrifkan oleh jurang-lajur grid dan jurang-baris grid, ditolak daripada ruang yang tersedia sebelum mengira nilai fr.

Unit Peratusan

Unit peratusan, sebaliknya , tentukan lebar lajur atau baris sebagai peratusan keseluruhan bekas grid, termasuk jurang grid. Ini bermakna saiz elemen adalah tetap dan ia tidak melaraskan secara dinamik berdasarkan saiz bekas.

Akibatnya, adalah mungkin untuk menghadapi situasi di mana jumlah lebar lajur, termasuk jurang grid, melebihi lebar bekas grid. Ini boleh menyebabkan reka letak melimpahi bekas.

Contoh

Untuk menggambarkan perbezaan tingkah laku, pertimbangkan reka letak grid berikut:

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Dalam kes ini, peratusan unit digunakan untuk menentukan lebar lajur. Akibatnya, jumlah lebar lajur, termasuk jurang grid (11 jurang dengan jurang 10px), melebihi lebar bekas grid, menyebabkan reka letak melimpah.

Walau bagaimanapun, jika kita beralih kepada menggunakan fr unit sebaliknya:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Lajur kini mengambil jumlah berkadar ruang kosong yang tersedia dan jurang grid adalah ditolak daripada jumlah ruang sebelum mengira nilai fr. Ini menghasilkan reka letak responsif yang melaraskan secara dinamik berdasarkan saiz bekas grid.

Kesimpulan

Memilih unit yang sesuai untuk reka letak grid anda bergantung pada gelagat yang diingini. Unit peratusan sesuai apabila anda mahukan saiz tetap, manakala unit fr bermanfaat apabila anda memerlukan reka letak responsif yang berskala mengikut ruang yang tersedia. Memahami perbezaan antara unit ini dan kesannya pada reka letak adalah penting untuk mencipta reka letak Grid CSS yang cekap dan menarik secara visual.

Atas ialah kandungan terperinci Reka Letak Grid CSS: Peratusan lwn. Unit `fr` – Apakah Perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!