Rumah > Artikel > hujung hadapan web > Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid
Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid
- 王林asal
- 2023-10-19 10:49:441353semak imbas
Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur purata grid
Dalam reka bentuk web, Susun Atur Grid ialah kaedah reka letak yang biasa digunakan, yang boleh membahagikan kandungan web kepada berbilang lajur dengan berkesan dan melaksanakan susunan dan reka letak yang fleksibel. Tutorial ini akan memperkenalkan cara menggunakan reka letak Grid HTML dan CSS untuk melaksanakan susun atur purata grid dan memberikan contoh kod khusus.
1. Apakah susun atur grid?
Susun atur grid ialah kaedah reka letak yang membahagikan halaman kepada berbilang lajur. Ia lebih fleksibel daripada kaedah reka letak web tradisional dan boleh menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza.
Dalam HTML, kami boleh melaksanakan susun atur grid melalui susun atur Grid CSS. Susun atur grid menyediakan satu siri sifat dan nilai untuk mentakrifkan baris dan lajur susun atur grid, serta saiz dan kedudukan setiap lajur.
2. Bagaimana untuk menggunakan susun atur Grid untuk mencapai susun atur grid purata?
Berikut ialah contoh mudah yang menunjukkan cara melaksanakan susun atur purata grid menggunakan susun atur Grid:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.grid-item {
border: 1px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>Dalam kod di atas, kami mula-mula mencipta bekas dengan nama kelas grid-container Elemen bekas, digunakan untuk balut elemen lajur. Kemudian, kami menggunakan gaya CSS display: grid; pada elemen bekas untuk menentukan bahawa elemen itu disusun dan dibentangkan menggunakan reka letak Grid. grid-container的容器元素，用于包裹栏目元素。然后，我们为该容器元素应用了display: grid;的CSS样式，以指定该元素使用Grid布局进行排列和布局。
接下来，我们使用grid-template-columns属性来指定栅格布局的列数和列宽。在本例中，我们使用repeat(4, 1fr)的值来表示，我们希望创建4列的栅格布局，每列的宽度平均分配（1fr表示等分的意思）。
最后，我们使用grid-gap属性来指定栅格之间的间隔。在本例中，我们将栅格之间的间隔设置为10像素。
栏目元素的样式通过.grid-item类名来定义。在本例中，我们设置了边框和内边距，以及居中对齐的文本。
三、总结
通过Grid布局，我们可以方便地实现栅格平均布局。使用grid-template-columns属性来指定列数和列宽，使用grid-gap
grid-template-columns untuk menentukan nombor dan lebar lajur bagi reka letak grid. Dalam contoh ini, kami menggunakan nilai repeat(4, 1fr) untuk menunjukkan bahawa kami ingin mencipta reka letak grid 4 lajur dengan lebar setiap lajur diagihkan sama rata (1fr kod> bermaksud bahagian yang sama). <p></p>Akhir sekali, kami menggunakan atribut <code>grid-gap untuk menentukan jurang antara grid. Dalam contoh ini, kami menetapkan jarak antara raster kepada 10 piksel. 🎜🎜Gaya elemen lajur ditakrifkan oleh nama kelas .grid-item. Dalam contoh ini, kami menetapkan sempadan dan pelapik serta teks sejajar tengah. 🎜🎜3. Ringkasan🎜🎜Melalui susun atur Grid, kita boleh mencapai susun atur purata grid. Gunakan sifat grid-template-columns untuk menentukan bilangan dan lebar lajur dan gunakan sifat grid-gap untuk menetapkan jarak antara grid. Dengan melaraskan nilai sifat ini, kita boleh mencapai kesan susun atur grid yang berbeza. 🎜🎜Saya berharap melalui tutorial ini, anda dapat memahami dan menguasai kaedah asas menggunakan susun atur Grid untuk susun atur purata grid, dan dapat menyesuaikan dan mengaplikasikannya mengikut keperluan anda sendiri secara fleksibel. Saya doakan anda mendapat hasil yang baik dalam reka bentuk web anda! 🎜Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!