hujung hadapan web
html tutorial
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
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
