Perbezaan teras adalah bahawa grid-template-lajur mentakrifkan lajur yang ditetapkan secara eksplisit dalam susun atur, manakala kawalan grid-auto-lajur secara tersirat dibuat lajur apabila diperlukan. Grid-template-lajur menetapkan nombor dan saiz lajur yang tepat yang anda tentukan, seperti 200px, 1FR, 2FR, mewujudkan struktur tetap. Jika item diletakkan di luar lajur yang ditakrifkan ini, penyemak imbas mencipta yang baru secara automatik, dan grid-auto-lajur menentukan lebarnya. Sebagai contoh, dengan grid-templat-lajur: ulangi (3, 100px) dan grid-auto-lajur: 50px, sebarang item limpahan yang diletakkan dalam lajur 4 atau seterusnya akan masuk ke dalam lajur yang baru dijana lebar 50px. Gunakan grid-template-lajur untuk merancang susun atur yang disengajakan dengan dimensi yang diketahui, dan gunakan grid-auto-lajur untuk menguruskan kandungan yang tidak dijangka atau dinamik limpahan secara konsisten.

Apabila bekerja dengan grid CSS, grid-template-columns dan grid-auto-columns kedua-duanya menentukan saiz lajur, tetapi mereka mensasarkan bahagian-bahagian yang berlainan dari grid dan berkelakuan berbeza di bawah pelbagai keadaan.

Apakah perbezaan teras?

Pendek kata:

• grid-template-columns mentakrifkan bilangan dan saiz lajur yang anda buat secara eksplisit.
• grid-auto-columns menetapkan saiz untuk lajur yang dibuat secara tersirat apabila terdapat lebih banyak item grid daripada trek yang ditetapkan.

Sekarang mari kita memecahkannya dengan lebih praktikal.

1. grid-template-columns : Menentukan susun atur anda

Harta ini digunakan untuk menubuhkan grid eksplisit - makna, lajur yang anda nyatakan secara langsung dalam CSS anda.

Contohnya:

 .Grid {
  paparan: grid;
  Grid-template-lajur: 200px 1FR 2FR;
}

Ini mewujudkan tiga lajur dengan lebar yang ditentukan. Mana -mana item grid yang diletakkan di dalam lajur ini akan mengikut peraturan saiz mereka.

? Gunakan ini ketika:

• Anda tahu berapa lajur yang anda mahukan di hadapan.
• Anda menentukan susun atur tetap atau responsif secara manual.
• Anda menggunakan garisan atau kawasan grid yang dinamakan.

Jika anda meletakkan item di luar lajur ini (seperti dalam lajur keempat), penyemak imbas secara automatik akan membuat lajur baru-dan di sinilah grid-auto-columns dimainkan.

2. grid-auto-columns : mengendalikan lajur limpahan

Lajur ini dibuat secara automatik oleh penyemak imbas apabila terdapat lebih banyak item daripada terdapat lajur yang jelas.

Contohnya:

 .Grid {
  paparan: grid;
  Grid-template-lajur: Ulang (3, 100px);
  Grid-Auto-lajur: 50px;
}

Jika anda mempunyai lebih daripada tiga lajur bernilai kandungan (katakan, anda menggunakan grid-column: 4 pada item), penyemak imbas akan membuat lajur baru yang luas 50px.

?? Gotchas biasa:

• Jika anda tidak menetapkan grid-auto-columns , lebar lalai adalah auto , yang boleh membawa kepada susun atur yang tidak dapat diramalkan.
• Harta ini amat berguna apabila menggunakan grid-auto-flow: column , yang membolehkan item mengalir secara mendatar ke dalam lajur baru.

Oleh itu, sementara grid-template-columns memberi anda kawalan ke atas struktur yang anda rancangkan, grid-auto-columns membantu menguruskan apa yang berlaku apabila keadaan melampaui itu.

3. Bila hendak menggunakan masing -masing (dan mengapa ia penting)

Anda biasanya akan menggunakan kedua -duanya dalam susun atur yang lebih kompleks, terutamanya apabila berurusan dengan kandungan dinamik.

Gunakan grid-template-columns ketika:

• Anda merancang susun atur yang diketahui (contohnya, papan pemuka 3-kolumn).
• Anda memerlukan kawalan yang tepat ke atas lajur tertentu.

Gunakan grid-auto-columns ketika:

• Anda mengharapkan item ditambah secara dinamik di luar susun atur awal.
• Anda membuat susun atur grid menatal mendatar.
• Anda mahu lajur tersirat untuk mengekalkan ukuran yang konsisten.

Mereka juga berfungsi dengan baik dengan sifat-sifat lain seperti minmax() dan auto-fit dalam repeat() untuk tingkah laku responsif.

Pemikiran terakhir

Memahami perbezaan di antara grid-template-columns dan grid-auto-columns berkumpul untuk mengetahui lajur mana yang ditakrifkan secara eksplisit berbanding yang dihasilkan secara automatik . Sebaik sahaja anda mendapat perbezaan itu, ia menjadi lebih mudah untuk mengawal bagaimana grid anda berkelakuan di bawah senario yang berbeza.

Itu pada dasarnya - tidak terlalu rumit apabila anda melihat bagaimana mereka sesuai bersama.

Atas ialah kandungan terperinci Perbezaan antara `grid-template-columns` dan` grid-auto-columns`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!