Auto-Isi lwn. Auto-Fit dalam Grid CSS: Apakah Perbezaannya?

Memahami Perbezaan Antara Isi Auto dan Automuat dalam Reka Letak Grid

Apabila bekerja dengan grid CSS, anda sering menemui istilah " auto-isi" dan "auto-muat" dalam konteks mewujudkan susun atur grid berasaskan kad. Sifat ini menentukan cara grid mengendalikan senario di mana item yang tersedia mungkin tidak mengisi ruang yang tersedia sepenuhnya.

AutoIsi lwn. AutoMuat

Kedua-dua autoisi dan muat auto mencipta bilangan trek grid (lajur atau baris) yang ditentukan, tetapi kelakuannya berbeza apabila item yang tersedia tidak mencukupi untuk mengisi semua trek.

• AutoFit: Jika tidak ada item yang mencukupi untuk mengisi semua trek, trek kosong akan runtuh dan item sedia ada mengembang untuk mengisi ruang kosong.
• Autoisi: Tidak seperti automuat, trek kosong disimpan dalam autoisi, menghasilkan dalam susun atur grid tetap, tanpa mengira bilangan item.

Kesan pada Paparan Kad

Dalam susun atur grid kad anda, menggunakan autoisi dan bukannya auto-muat akan memastikan bahawa kad kekal dipaparkan sebagai entiti yang berasingan walaupun terdapat hanya beberapa daripadanya. Dengan mengekalkan struktur grid tetap, isian automatik membolehkan kad anda diedarkan sama rata dan diasingkan dengan jelas.

Contoh

Pertimbangkan kod berikut:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Dengan auto-isi, bekas grid akan membuat sebanyak mungkin lajur tanpa melimpahi pembalut, sama ada kad mencukupi atau tidak untuk mengisi semua lajur. Kad sedia ada akan dijarakkan sama rata dan dipaparkan secara berasingan, mengekalkan reka letak kad.

Kesimpulan

Memilih antara isian automatik dan muat automatik bergantung pada tingkah laku yang diingini dalam senario dengan jumlah item yang berbeza-beza. Autolengkap lebih diutamakan untuk mengekalkan struktur grid yang konsisten, manakala auto muat meruntuhkan trek kosong untuk membolehkan item berkembang dan memenuhi ruang yang tersedia.

Atas ialah kandungan terperinci Auto-Isi lwn. Auto-Fit dalam Grid CSS: Apakah Perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!