Bagaimana untuk Meregangkan Baris Grid CSS Merentas Semua Lajur?

Cara Membuat Regangan Baris Merentas Semua Lajur dalam Grid CSS

Grid CSS ialah sistem susun atur berkuasa yang menyediakan pemaju cara yang fleksibel dan cekap untuk mencipta reka letak yang kompleks . Salah satu soalan paling biasa yang ditanya oleh pembangun semasa bekerja dengan Grid CSS ialah cara membuat regangan baris atau lajur merentas semua lajur atau baris yang tersedia.

Dalam artikel ini, kita akan membincangkan dua kaedah untuk membuat baris. merentangi semua lajur dalam reka letak Grid CSS.

Kaedah 1: Menggunakan Grid-lajur: 1 / -1

Kaedah pertama melibatkan penggunaan grid-lajur: 1 / -1. Sintaks ini memberitahu pelayar untuk memulakan elemen pada lajur pertama (1) dan menamatkannya pada lajur terakhir (-1).

Berikut ialah contoh cara menggunakan kaedah ini:

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

Ini akan menyebabkan elemen .row meregangkan semua lajur dalam grid.

Kaedah 2: Menggunakan Grid-template-columns: auto

The kaedah kedua melibatkan penggunaan grid-template-lajur: auto. Sintaks ini memberitahu penyemak imbas untuk mengagihkan ruang yang tersedia secara automatik untuk lajur berdasarkan kandungan.

Berikut ialah contoh cara menggunakan kaedah ini:

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

.row {
    grid-column: 1;
}</code>

Ini akan menyebabkan .row elemen untuk meregangkan merentasi lebar penuh elemen .container, kerana hanya terdapat satu lajur yang ditakrifkan dalam sifat grid-template-columns.

Kedua-dua kaedah ini boleh digunakan untuk membuat regangan baris merentas semua lajur dalam Grid CSS. Kaedah yang anda pilih bergantung pada keperluan dan pilihan khusus anda.

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