Mengapa Susun Atur Grid CSS Saya Pecah?

Menyelesaikan Masalah Kawasan Grid dalam Grid CSS

Semasa melaksanakan sistem grid CSS, adalah penting untuk memastikan kawasan dibentangkan dengan betul . Jika anda menghadapi masalah, sahkan perkara berikut:

Memastikan Kiraan Lajur Konsisten

Apabila menggunakan sifat kawasan templat grid, nilai rentetan mesti mempunyai bilangan lajur yang sama. Ini kerana setiap spesifikasi baris dalam rentetan sepadan dengan baris dalam templat grid dan setiap perkataan dalam spesifikasi baris sepadan dengan lajur.

Dalam kod yang anda berikan, anda mempunyai satu baris dengan dua lajur ("logo faq") tetapi baris lain dengan hanya satu lajur ("tentang-kami"). Ketidakkonsistenan ini menyebabkan isu reka letak.

Kod Dibetulkan:

.grid {<br> paparan: grid;<br> grid-template-lajur: 1fr 1fr;<br> grid-template-rows: 1fr 1fr;<br> grid-template-areas: "logo soalan" "tentang-kami about-us";<br>}<br>

 <div class="logo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">LOGO