Mengapa Tata Letak Grid CSS Saya Tidak Berfungsi Seperti Yang Dijangkakan dengan `kawasan-templat-grid`?

Menyelesaikan Masalah Peletakan Kawasan Grid dalam Grid CSS

Dalam Grid CSS, sifat kawasan templat grid memperuntukkan kawasan khusus grid kepada elemen. Walau bagaimanapun, apabila bekerja dengan sifat ini, kami mungkin menghadapi masalah dengan reka letak tidak muncul seperti yang dijangkakan.

Satu ralat biasa ialah apabila rentetan yang disediakan tidak mempunyai bilangan lajur yang sama seperti yang ditakrifkan dalam lajur templat grid . Dalam kes ini, reka letak mungkin tidak akan muncul dengan betul.

Mari kita ambil contoh berikut:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

Dalam contoh ini, sifat grid-template-aas mentakrifkan dua baris dan satu lajur , tetapi sifat grid-template-columns mentakrifkan dua lajur. Ketidakkonsistenan ini akan mengakibatkan tingkah laku yang tidak dijangka.

Untuk menyelesaikan masalah ini, sifat kawasan templat grid mesti mempunyai bilangan lajur yang sama dengan sifat lajur templat grid. Dalam kes ini, kita boleh mengubah suai sifat grid-template-areas seperti berikut:

grid-template-areas: "logo faq" "about-us about-us";

Ini memastikan reka letak akan diselaraskan dengan betul dengan lajur yang ditentukan.

Ingat, apabila bekerja dengan grid-template-kawasan, bilangan kawasan yang ditentukan mesti sepadan dengan bilangan baris dan lajur yang dinyatakan dalam sifat grid-template-row dan grid-template-columns, masing-masing.

Atas ialah kandungan terperinci Mengapa Tata Letak Grid CSS Saya Tidak Berfungsi Seperti Yang Dijangkakan dengan `kawasan-templat-grid`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!