Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid-html tutorial-php.cn

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

PHPz

Lepaskan： 2023-10-20 13:58:47

asal

1333 orang telah melayarinya

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

Tutorial HTML: Menggunakan Tataletak Grid untuk Melaksanakan Susun atur Grid

Susun atur halaman web ialah bahagian penting reka bentuk web, reka letak web yang munasabah. boleh meningkatkan pengalaman menyemak imbas pengguna. Reka letak grid ialah teknologi yang sangat penting dalam reka letak halaman web moden, yang boleh membantu kami melaksanakan reka letak grid dengan mudah.

Dalam artikel ini, kita akan belajar cara membuat susun atur grid raster menggunakan reka letak Grid HTML dan CSS, dan memberikan beberapa contoh kod khusus. Mari mulakan!

Buat struktur HTML

Pertama, kita perlu mencipta struktur HTML asas. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
  <head>
    <title>Grid布局示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </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 class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mencipta bekas dengan 9 elemen kanak-kanak. Setiap elemen kanak-kanak mempunyai kelas "item", dan kami akan menggunakan susun atur Grid untuk susun aturnya.

Menulis gaya CSS

Seterusnya, kita perlu menulis gaya CSS untuk menentukan sifat susun atur Grid. Kami mentakrifkan gaya dalam helaian gaya luaran yang dipanggil styles.css dan kemudian memautkannya ke dalam dokumen HTML.

Berikut ialah kandungan asas gaya.css:

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

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Salin selepas log masuk

Dalam contoh ini, kami menggunakan paparan: atribut grid pada elemen .container supaya ia menjadi bekas Grid . Atribut grid-template-columns mentakrifkan lebar setiap lajur Di sini kami menggunakan "repeat(3, 1fr)", yang bermaksud bekas dibahagikan kepada 3 lajur dan purata lebar setiap lajur ialah 1fr. Atribut jurang grid mentakrifkan saiz jurang. Gaya pada elemen

.item menetapkan warna latar belakang, pelapik dan penjajaran teks berpusat.

Jalankan kod dan lihat hasilnya

Simpan kod di atas sebagai fail HTML dan buat fail styles.css dalam direktori yang sama . Kemudian buka fail HTML dalam penyemak imbas, dan anda boleh melihat bahawa susun atur halaman web telah dikawal oleh susun atur Grid.

Kita dapat melihat bahawa elemen kanak-kanak disusun mengikut susun atur grid raster, lebar setiap elemen kanak-kanak diagihkan sama rata, dan terdapat jurang 10px di antara mereka.

Teroka lebih lanjut ciri susun atur Grid

Susun atur grid tidak terhad kepada susun atur grid asas, tetapi juga menyediakan lebih banyak fungsi untuk melaksanakan lebih banyak susun atur yang kompleks.

Sebagai contoh, kita boleh menggunakan atribut grid-template-rows untuk menentukan ketinggian setiap baris. Kami juga boleh menggunakan atribut kawasan grid untuk menyesuaikan kedudukan elemen kanak-kanak dan atribut kawasan templat grid untuk mencipta reka letak kawasan tersuai.

Selain itu, susun atur Grid juga menyediakan beberapa sifat lain, seperti grid-auto-lajur dan grid-auto-baris, yang digunakan untuk menentukan gelagat apabila bilangan elemen anak dalam bekas melebihi definisi grid.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan reka letak Grid HTML dan CSS untuk melaksanakan reka letak grid grid dan menyediakan contoh kod khusus. Saya harap artikel ini akan membantu semua orang memahami dan menggunakan reka letak Grid. Dalam aplikasi praktikal, kita boleh menggunakan pelbagai sifat susun atur Grid secara fleksibel untuk mencipta reka letak halaman web yang memenuhi keperluan kita sendiri.

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!