Rumah > Artikel > hujung hadapan web > Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid Auto
Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid Auto
- WBOYasal
- 2023-10-18 08:52:411393semak imbas
Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur automatik purata grid, contoh kod khusus diperlukan
Pengenalan:
Dalam pembangunan bahagian hadapan, reka bentuk reka letak ialah pautan penting. Kaedah susun atur tradisional dilaksanakan dengan menggunakan atribut seperti apungan, kedudukan, dan paparan, tetapi kaedah ini mempunyai banyak kelemahan dan memerlukan pengiraan manual dan pelarasan kedudukan dan saiz elemen. Menggunakan susun atur Grid CSS boleh merealisasikan susun atur halaman web dengan lebih ringkas dan fleksibel. Artikel ini akan memperkenalkan cara menggunakan reka letak Grid untuk susun atur automatik purata grid dan memberikan contoh kod khusus. . Menggunakan reka letak Grid memerlukan penentuan bekas (diisytiharkan melalui paparan: grid), dan kemudian menambah elemen anak dalam bekas (dikawal melalui sifat seperti lajur grid dan baris grid). Reka letak grid menyediakan satu siri sifat dan kaedah yang boleh mengawal kedudukan, saiz, jarak, dsb. unsur dengan tepat.
2. Langkah untuk melaksanakan susun atur automatik purata grid
susun atur automatik purata grid bermaksud untuk mengagihkan elemen dalam bekas mengikut bilangan lajur yang tetap dan secara automatik melaraskan saiz elemen untuk mengisi keseluruhan bekas. Berikut ialah langkah khusus untuk melaksanakan susun atur automatik purata grid:
- Di sini kami menggunakan div sebagai bekas dan menambah kelas bernama "bekas" padanya. Kemudian tetapkan atribut paparan elemen dengan nama kelas ini kepada grid dalam CSS untuk mengisytiharkannya sebagai susun atur Grid. Tetapkan bilangan lajur dan ketinggian baris grid:
- Dalam kod di atas, kami menggunakan sifat grid-template-columns untuk menetapkan bilangan lajur grid. repeat(3, 1fr) bermaksud mencipta 3 lajur, setiap lajur mempunyai lebar 1fr, iaitu ruang yang tinggal diagihkan sama rata. Atribut grid-auto-rows digunakan untuk menetapkan ketinggian baris, di sini kami menetapkannya kepada 200px. Dengan menetapkan dua sifat ini, kami mentakrifkan grid dengan 3 lajur dan ketinggian baris 200px. Tambahkan elemen kanak-kanak dan tetapkan kedudukan grid:
- Tambahkan elemen kanak-kanak di dalam bekas dan tambahkan kelas bernama "item" padanya, kemudian tetapkan warna latar belakang elemen kanak-kanak melalui CSS. Di sini kami hanya menambah 3 sub-elemen, anda boleh menambah lebih banyak sub-elemen mengikut keperluan sebenar. Kawal kedudukan elemen kanak-kanak dalam grid:
- Dalam kod di atas, kami menambahkan atribut mula-mula-lajur dan grid-lajur-akhir kepada elemen kanak-kanak, dan menetapkan nilainya kepada auto, yang bermaksud Elemen kanak-kanak secara automatik menduduki lajur dalam grid. Ini mencapai pengagihan elemen yang sekata. 3. Contoh kod lengkap Berikut ialah contoh lengkap yang menunjukkan cara menggunakan susun atur Grid untuk susun atur automatik purata grid:
<div class="container">
...
</div>
<style>
.container {
display: grid;
}
</style><style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
</style><div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
...
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
.item {
background-color: #ccc;
}
</style><style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
.item {
background-color: #ccc;
grid-column-start: auto;
grid-column-end: auto;
}
</style><!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
.item {
background-color: #ccc;
grid-column-start: auto;
grid-column-end: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html> 4. Ringkasan
Artikel ini memperkenalkan kaedah menggunakan susun atur Grid untuk susun atur automatik purata grid , dan menyediakan contoh kod khusus. Dengan menggunakan reka letak Grid, kami boleh melaksanakan reka letak halaman web dengan lebih mudah dan mengawal kedudukan dan saiz elemen secara fleksibel. Saya harap artikel ini akan membantu reka bentuk susun atur semua orang dalam pembangunan bahagian hadapan.
Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid Auto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!