Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur grid, contoh kod khusus diperlukan

Pengenalan:
Dalam reka bentuk web moden, susun atur grid ialah kaedah susun atur yang sangat popular dan praktikal. Ia boleh membantu pembangun mengawal reka letak dan tetapan taip halaman web dengan lebih fleksibel, menjadikan halaman web lebih cantik dan lebih mudah dibaca. Artikel ini akan memperkenalkan anda kepada cara menggunakan reka letak Grid dalam HTML untuk reka letak grid dan memberikan contoh kod khusus untuk membantu pembaca bermula dengan cepat.

Bahagian 1: Konsep asas susun atur Grid
Susun atur grid ialah kaedah reka letak baharu yang disediakan oleh modul Tataletak Grid CSS. Ia membahagikan halaman web kepada sel grid dan pembangun boleh meletakkan elemen dalam sel grid ini. Reka letak grid mempunyai konsep asas berikut:

1. Bekas Grid: Bekas utama grid Anda boleh mencipta bekas grid dengan menetapkan atribut paparan elemen kepada grid atau grid sebaris.
2. Item Grid: Setiap elemen kanak-kanak dalam bekas grid ialah item grid, dan ia diletakkan di dalam sel bekas grid.
3. Garis Grid: Garisan pembahagi mendatar atau menegak grid, yang boleh digunakan untuk meletakkan item grid.
4. Trek Grid: Kawasan antara dua garisan grid bersebelahan, yang boleh digunakan untuk menentukan lebar atau ketinggian item grid.
5. Sel Grid: Kawasan yang dikelilingi oleh dua garisan grid mendatar dan menegak bersebelahan.
6. Kawasan Grid: Kawasan segi empat tepat yang dikelilingi oleh empat garisan grid, yang boleh digunakan untuk meletakkan berbilang item grid.

Bahagian 2: Buat grid asas menggunakan susun atur Grid
Pertama, kita perlu mencipta bekas grid dan meletakkan elemen kanak-kanak dalam grid. Struktur HTML boleh semudah berikut:

 
1
 
2
 
3
 
4
 

Seterusnya, kita perlu menetapkan beberapa sifat untuk bekas grid dalam CSS untuk melaksanakan susun atur grid:

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }

Dalam kod di atas, kami menetapkan atribut paparan bekas grid ke grid , menunjukkan mencipta susun atur grid. Atribut grid-template-columns digunakan untuk menentukan bilangan dan lebar lajur bekas grid Di sini kita membahagikan grid kepada tiga lajur, dan lebar setiap lajur adalah sama 1fr digunakan untuk menunjukkan lebar teragih sama . Atribut jurang grid digunakan untuk menentukan saiz jurang antara grid Di sini kita menetapkan jurang kepada 10px.

Kini, kita boleh meletakkan empat item grid dalam bekas grid dan menentukan kedudukannya:

.item { background-color: #ccc; padding: 20px; text-align: center; } .item1 { grid-column: 1 / 2; grid-row: 1 / 3; } .item2 { grid-column: 2 / 4; grid-row: 1 / 2; } .item3 { grid-column: 2 / 3; grid-row: 2 / 3; } .item4 { grid-column: 3 / 4; grid-row: 2 / 3; }

Dalam kod di atas, kami telah mentakrifkan empat item grid dan menghantarnya melalui lajur grid dan Sifat baris grid menentukan kedudukannya dalam grid.

Bahagian 3: Gunakan Tata Letak Grid untuk Mencipta Grid Responsif
Selain susun atur grid asas, Tata Letak Grid juga menyokong reka letak responsif, yang boleh melaraskan susun atur grid secara automatik mengikut saiz dan resolusi skrin.

Sebagai contoh, kita boleh memaparkan grid tiga lajur pada skrin besar dan hanya grid satu lajur pada skrin kecil. Kodnya adalah seperti berikut:

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; }

Dalam kod di atas, kami menggunakan fungsi repeat() dan minmax() bagi atribut grid-template-columns untuk melaksanakan reka letak responsif. Fungsi repeat() digunakan untuk mengulang definisi trek grid, auto-fit bermaksud mengisi grid secara automatik mengikut saiz bekas, dan fungsi minmax() digunakan untuk mengehadkan lebar minimum dan maksimum setiap grid trek.

Bahagian 4: Kesimpulan
Melalui susun atur Grid, kami boleh mengawal reka letak dan tetapan taip halaman web dengan lebih fleksibel untuk mencapai kesan yang lebih cantik dan boleh dibaca. Artikel ini memperkenalkan konsep asas susun atur Grid dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat. Saya harap pembaca boleh menggunakan susun atur Grid dalam pembangunan sebenar untuk mencipta reka bentuk web yang sangat baik.

Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!