Bagaimana untuk Membuat Regangan Baris Merentas Semua Lajur dalam Grid CSS?

Buat Regangan Baris Merentas Semua Lajur dalam Grid CSS: Melaraskan Keluasan

Apabila memanjangkan baris navigasi anda merentasi semua lajur dalam grid CSS, pastikan anda menentukan baris lajur yang sesuai. Pada mulanya, anda telah mentakrifkan:

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

Ini mentakrifkan baris untuk dilanjutkan dari baris lajur grid 1 hingga baris 2, meliputi hanya satu lajur.

Penyelesaian 1: Melanjutkan ke lajur Baris Terakhir

Untuk memanjangkan baris merentasi semua lajur, anda boleh melaraskan sifat lajur grid untuk memanjangkannya ke baris terakhir:

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

Ini menunjukkan bahawa baris hendaklah bermula pada baris lajur pertama dan berakhir pada baris lajur ketiga (terakhir).

Penyelesaian 2: Menggunakan Nilai Negatif

Sebagai alternatif, anda boleh menggunakan nilai negatif untuk rujukan dari hujung grid:

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

Di sini, -1 mewakili baris lajur terakhir, dengan berkesan menjadikan baris merentangi semua lajur.

Kod Dilaraskan:

<code class="css">body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;    /* Adjusted to span all columns */
  grid-row: 1 / 2;        /* Adjustment for explicit grid */
  background-color: #5eccc0;
}

...</code>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Regangan Baris Merentas Semua Lajur dalam Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!