Tutorial HTML: Bagaimana untuk melaksanakan susun atur grid menggunakan susun atur Grid

Tutorial HTML: Cara menggunakan susun atur Grid untuk melaksanakan susun atur grid

Dalam pembangunan bahagian hadapan, melaksanakan susun atur grid adalah keperluan yang sangat biasa . Reka letak grid membolehkan anda menyusun pelbagai elemen secara fleksibel dalam halaman web untuk menjadikan halaman itu cantik dan responsif. Dalam HTML, kita boleh menggunakan susun atur Grid untuk melaksanakan susun atur grid. Artikel ini akan memperkenalkan secara terperinci cara menggunakan reka letak Grid untuk melaksanakan reka letak grid dan memberikan contoh kod khusus.

Pengenalan Susun Atur Grid

Susun atur grid ialah kaedah reka letak dalam CSS yang menyusun elemen dengan meletakkannya dalam grid. Susun atur grid menyediakan kaedah susun atur yang lebih intuitif dan fleksibel, yang boleh mentakrifkan baris dan lajur grid, supaya elemen boleh dialihkan dan disusun secara bebas dalam grid.

Pertama, perkenalkan fail CSS di bahagian kepala HTML:

<link rel="stylesheet" type="text/css" href="style.css">

Tentukan susun atur grid dalam fail style.css:

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

.box {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

Dalam HTML Dalam bahagian badan, cipta elemen bekas dan tambahkan berbilang elemen kotak di dalamnya:

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
  <div class="box">盒子5</div>
  <div class="box">盒子6</div>
</div>

Dalam kod di atas, tetapkan elemen kontena kepada susun atur Grid melalui paparan: grid, melalui grid-template- columns : repeat(3, 1fr) mentakrifkan susun atur grid 3 lajur, dengan setiap lajur mempunyai lebar 1fr, yang mengagihkan ruang yang tersedia secara sama rata. Dan grid-gap: 20px menetapkan jurang antara elemen kotak kepada 20px.

Dalam contoh, sejumlah 6 elemen kotak dicipta dan ia akan disusun secara automatik dalam susun atur Grid, dengan 3 elemen berturut-turut. Jika anda menambah lebih banyak elemen kotak, ia akan ditambahkan secara automatik pada baris seterusnya.

Dengan contoh kod di atas, kami berjaya mencipta reka letak grid mudah. Seterusnya, kami akan memperkenalkan cara membuat susun atur yang lebih kompleks dalam susun atur Grid.

Lebih banyak cara untuk menggunakan susun atur Grid

Selain susun atur grid mudah, susun atur Grid juga menyediakan lebih banyak fungsi dan atribut, menjadikan reka letak lebih fleksibel dan pelbagai. Berikut ialah beberapa sifat susun atur Grid yang biasa digunakan:

1. grid-template-rows dan grid-template-columns: digunakan untuk menetapkan saiz baris dan lajur masing-masing, dan boleh menentukan tetap saiz piksel, Anda juga boleh menggunakan unit fr untuk peruntukan berkadar.
2. grid-row dan grid-column: Tentukan kedudukan permulaan dan penamat elemen, anda boleh menggunakan nombor, kata kunci (seperti span) dan automatik.
3. grid-area: digunakan untuk menentukan baris dan lajur permulaan serta baris dan lajur akhir elemen.
4. grid-template-areas: Dengan menamakan kawasan dalam grid, anda boleh menyusun elemen dengan lebih mudah.
5. justify-item dan align-item: digunakan untuk menetapkan penjajaran elemen dalam grid.

Dengan menggabungkan dan menggunakan atribut ini, kesan susun atur yang lebih kompleks boleh dicapai.

Ringkasan

Artikel ini memperkenalkan cara menggunakan reka letak Grid untuk melaksanakan reka letak grid dan menyediakan contoh kod khusus. Melalui reka letak Grid, kami boleh mencipta reka letak grid yang cantik dan responsif dengan mudah supaya halaman tersebut dapat dipaparkan dengan baik pada peranti yang berbeza saiz. Pada masa yang sama, susun atur Grid juga menyediakan lebih fleksibiliti dan kepelbagaian, dan keperluan susun atur yang lebih kompleks boleh dicapai melalui atribut dan kaedah yang berbeza. Kami menggalakkan pembaca meneroka dan mengamalkan susun atur Grid untuk meningkatkan lagi keupayaan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Tutorial HTML: Bagaimana untuk melaksanakan susun atur grid menggunakan susun atur Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!