Cara Memanjangkan Navigasi Grid Merentasi Keseluruhan Lebar Laman Web

Anatomi Grid Anda

Anda telah menghadapi isu di mana navigasi (nav) anda tidak merentangi seluruh lebar tapak web anda, walaupun menyatakan lajur yang anda mahu ia duduki. Untuk memahami masalah ini, mari kita pecahkan sintaks yang telah anda gunakan:

<code class="css">grid-column: 1 / 2;</code>

Notasi ini mentakrifkan titik permulaan dan penamat lajur grid, dipecahkan kepada:

<code class="css">grid-column-start: 1;
grid-column-end: 2;</code>

Dalam kes ini, ia memberitahu navigasi (nav) untuk melanjutkan dari baris lajur grid pertama ke baris lajur grid kedua. Walau bagaimanapun, terdapat percanggahan:

Grid anda sebenarnya mempunyai tiga baris lajur, bukan dua.

Pengiraan Garisan Grid: Garis Mula dan Tamat

Dalam sistem grid, bilangan baris lajur/baris sentiasa sama dengan bilangan lajur/baris tambah satu. Garis tambahan ini menunjukkan penghujung grid.

Melaraskan Spesifikasi Grid Anda

Untuk menyelesaikan isu ini, anda boleh melaraskan spesifikasi grid anda untuk merentangi semua lajur:

Pilihan 1: Tentukan Lajur Penamat

<code class="css">grid-column: 1 / 3;</code>

Pilihan 2: Gunakan Nilai Negatif

<code class="css">grid-column: 1 / -1;</code>

Nilai negatif dikira dari penghujung grid, jadi "-1" mewakili baris lajur terakhir.

Membuat Perubahan

Ganti peraturan lajur grid asal anda dengan salah satu daripada pilihan di atas:

<code class="css">.mainnav {
  grid-column: 1 / -1;
}</code>

Perubahan ini akan membolehkan navigasi (nav) anda merentangi seluruh lebar tapak web anda.

Atas ialah kandungan terperinci Cara Memanjangkan Navigasi Grid Merentasi Keseluruhan Lebar Laman Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!