Mengapa Kawasan Grid CSS Saya Tidak Diletak Dengan Betul?

Grid CSS: Kawasan Grid Tidak Diletak Dengan Betul

Dalam sistem grid CSS, sifat kawasan templat grid boleh digunakan untuk menentukan menamakan kawasan dalam grid. Walau bagaimanapun, isu mungkin timbul apabila menggunakan sifat ini, yang membawa kepada susun atur kawasan grid yang tidak betul.

Masalah:

Apabila mentakrifkan kawasan grid menggunakan sifat kawasan templat grid , susun atur yang tidak dijangka berlaku. Kod berikut menunjukkan isu:

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

Kod ini mentakrifkan grid 2x2 dengan dua kawasan bernama "logo" dan "faq" di baris pertama dan kawasan bernama "tentang-kami" di baris kedua barisan. Walau bagaimanapun, reka letak tidak sejajar dengan konfigurasi yang dimaksudkan.

Penyelesaian:

Masalah berpunca daripada bilangan lajur yang tidak betul dalam sifat grid-template-kawasan. Setiap rentetan dalam sifat harus mempunyai bilangan lajur yang sama seperti yang ditakrifkan dalam lajur templat grid. Dalam kes ini, sifat hanya menentukan satu lajur, manakala grid ditakrifkan dengan dua lajur.

Untuk menyelesaikan isu ini, kawasan "tentang kami" perlu dibahagikan kepada dua lajur menggunakan rentetan tambahan:

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

Dengan pelarasan ini, kawasan grid akan dibentangkan dengan betul, sejajar dengan konfigurasi yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Kawasan Grid CSS Saya Tidak Diletak Dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!