Rumah > Artikel > hujung hadapan web > Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid Purata Grid
Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur grid purata grid
Dalam pembangunan bahagian hadapan, Susun Atur Grid (Susun Letak Grid) ialah kaedah susun atur yang sangat berkuasa dan fleksibel. Ia membolehkan kami membuat reka letak grid dengan lebih mudah dan melaksanakan reka bentuk responsif halaman. Artikel ini akan memperkenalkan cara menggunakan reka letak Grid untuk susun atur grid purata grid dan memberikan contoh kod khusus.
<div class="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 class="grid-item">5</div> <div class="grid-item">6</div> </div>
Dalam contoh ini, kami mempunyai bekas yang mengandungi 6 item grid.
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; }
Dalam kod di atas, kami mentakrifkan jarak antara item grid melalui atribut display: grid
将容器设置为Grid布局。接下来,我们使用grid-template-columns
属性定义栅格的列数和宽度。repeat(auto-fit, minmax(200px, 1fr))
表示栅格的宽度为200px,并且会自动适配父容器的宽度,超过容器宽度后会自动换行。最后,我们还设置了grid-gap
.
.grid-item { background-color: #ccc; text-align: center; padding: 20px; font-size: 18px; color: #fff; }
Dalam contoh ini, kami menetapkan warna latar belakang, teks sejajar tengah, pelapik dan gaya fon untuk item grid.
Seperti yang ditunjukkan di atas, kami mempunyai 6 dalam bekas kami item grid, yang dipaparkan dalam susun atur grid dengan cara yang sama rata. Dengan mengubah saiz tetingkap penyemak imbas, kita dapat melihat bahawa item grid secara automatik akan menyesuaikan diri dengan lebar bekas dan secara automatik membalut atau melaraskan bilangan lajur berdasarkan lebar item grid.
Ringkasan
Dengan menggunakan reka letak Grid, kami boleh membuat susun atur grid purata grid dan mencapai reka bentuk responsif halaman dengan mudah. Artikel ini menerangkan langkah asas untuk mencipta reka letak grid purata raster dan menyediakan contoh kod khusus. Saya harap tutorial ini dapat membantu anda memahami dan menggunakan reka letak Grid dengan lebih baik.
Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid Purata Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!