Mengapa Reka Letak Kawasan Grid CSS Saya Tidak Betul?

Menyelesaikan Masalah Kawasan Grid dalam Grid CSS

Apabila bekerja dengan Grid CSS, memastikan kawasan grid dibentangkan dengan betul adalah penting. Walau bagaimanapun, kadang-kadang perkara tidak berjalan seperti yang diharapkan. Mari kita terokai isu biasa di mana kawasan grid kelihatan tidak betul.

Reka Letak Kawasan Grid Salah

Pertimbangkan kod berikut:

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

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

Dalam contoh ini , kami ingin membuat grid dengan dua lajur dan dua baris. Walau bagaimanapun, kawasan "about-us" tidak dipaparkan seperti yang dijangkakan.

Penyelesaian

Isu timbul kerana nilai rentetan dalam sifat grid-template-areas mesti mempunyai bilangan lajur yang sama dengan grid itu sendiri. Dalam kes ini, baris kedua hanya mempunyai satu lajur, manakala kawasan pertama dan kedua ditetapkan untuk memisahkan lajur.

Untuk menyelesaikan masalah ini, kita boleh menambah lajur lain pada baris kedua:

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

Kini, kawasan itu disusun dengan betul seperti yang dimaksudkan. Ingat, apabila menggunakan sifat grid-template-areas, memastikan nilai rentetan sejajar dengan konfigurasi grid adalah penting untuk reka letak grid yang betul.

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