Bagaimana Membuat Baris Grid CSS Menjangkau Berbilang Lajur?

Jadikan Baris Menjangkau Berbilang Lajur

Baris dalam Grid CSS boleh dikonfigurasikan untuk merangkumi berbilang lajur menggunakan sifat grid yang sesuai. Begini cara untuk mencapainya:

Peletakan Berasaskan Garisan:

Pendekatan yang paling biasa ialah melalui peletakan berasaskan baris, di mana anda menentukan baris mula dan tamat lajur:

<code class="css">grid-column: 1 / 4;  // Spans columns 1, 2, and 3</code>

Kawasan Grid Eksplisit:

Gunakan sifat kawasan grid, yang mentakrifkan sel yang diduduki secara eksplisit:

<code class="css">grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2</code>

Nilai Negatif:

Nilai negatif dalam grid-lajur atau grid-lajur-mula boleh digunakan untuk peletakan kanan-ke-kiri:

<code class="css">grid-column: -2 / -1;  // Spans the last 2 columns</code>

Pengapit Garisan Lajur :

Teknik ini menggunakan pengapit garisan untuk memanjangkan titik akhir baris ke ruang yang tersedia:

<code class="css">grid-column: auto;
grid-column-end: 100%;</code>

Auto-saiz dengan Minimum:

Auto-saiz dengan lebar minimum memastikan baris menduduki sekurang-kurangnya bilangan lajur yang ditentukan:

<code class="css">grid-column: auto;
min-width: 400px;</code>

Contoh:

Untuk meregangkan baris navigasi merentas semua lajur:

<code class="html"><div class="container">
  <div class="main-nav">
    ...
  </div>
  ...
</div></code>

<code class="css">.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}</code>

Dengan menggunakan salah satu kaedah ini, anda boleh memanjangkan baris atau lajur merentas berbilang lajur dalam Grid CSS, mencipta reka letak yang kompleks dan fleksibel.

Atas ialah kandungan terperinci Bagaimana Membuat Baris Grid CSS Menjangkau Berbilang Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!