Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur item grid adaptif-html tutorial-php.cn

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur item grid adaptif

WBOY

Lepaskan： 2023-10-18 09:38:05

asal

1024 orang telah melayarinya

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur item grid adaptif

Dalam reka bentuk web moden, susun atur penyesuaian adalah perkara yang paling penting . Melalui reka letak penyesuaian, halaman web boleh membentangkan kesan paparan terbaik pada peranti dan skrin yang berbeza, memberikan pengalaman pengguna yang lebih baik. Dalam hal ini, reka letak Grid CSS ialah alat berkuasa yang boleh membantu kami mencapai kebolehsuaian dalam reka letak halaman web.

Artikel ini akan memperkenalkan cara menggunakan reka letak Grid untuk melaksanakan reka letak item grid penyesuaian dan memberikan contoh kod khusus.

Pertama, buat struktur asas dalam HTML. Kami menggunakan bekas div sebagai elemen induk bagi reka letak Grid, yang mengandungi berbilang elemen anak sebagai item dalam grid. Berikut ialah contoh struktur HTML:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

Salin selepas log masuk

Seterusnya, kita perlu mentakrifkan susun atur Grid dalam CSS. Dengan menetapkan display: grid, kami boleh menetapkan elemen kontena kepada susun atur Grid. Dalam contoh ini, kami menetapkan kelas bekas kepada grid-container: display: grid，我们可以将容器元素设置为Grid布局。在这个例子中，我们将容器的class设置为grid-container：

.grid-container {
  display: grid;
}

Salin selepas log masuk

然后，我们可以使用grid-template-columns属性来定义网格的列。以下是一个示例，将容器分为三个等宽的列：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Salin selepas log masuk

在这个例子中，1fr代表一个可伸缩的单位，表示每列的宽度相等。

另外，我们还可以使用grid-template-rows属性来定义网格的行。以下是一个示例，将网格定义为三行三列：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

Salin selepas log masuk

如果我们想要设置每个网格项的间距，可以使用grid-gap属性。以下是一个示例，将每个网格项之间的间距设置为20像素：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 20px;
}

Salin selepas log masuk

除了等宽的列，我们还可以使用具体的宽度值来设置每个列的宽度。以下是一个示例，将第一列的宽度设置为200像素，第二列和第三列为自动宽度：

.grid-container {
  display: grid;
  grid-template-columns: 200px auto auto;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 20px;
}

Salin selepas log masuk

在这个例子中，第一列的宽度固定为200像素，而第二列和第三列的宽度将自动适应剩余的空间。

另外，我们还可以通过设置grid-auto-rows属性来定义自动行的高度。以下是一个示例，将自动行的高度设置为最小高度50像素：

.grid-container {
  display: grid;
  grid-template-columns: 200px auto auto;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-auto-rows: minmax(50px, auto);
}

Salin selepas log masuk

在这个例子中，自动行的高度将根据内容的高度自动调整，但最小高度不会小于50像素。

最后，我们还可以使用grid-template-areas

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header"
    "content sidebar"
    "content sidebar"
    "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 20px;
}

Salin selepas log masuk

Kemudian, kita boleh menggunakan atribut grid-template-columns untuk tentukan lajur grid. Berikut ialah contoh yang membahagikan bekas kepada tiga lajur yang sama lebar:

rrreee

Dalam contoh ini, 1fr mewakili unit boleh skala yang mewakili lebar setiap lajur yang sama.

Selain itu, kita juga boleh menggunakan atribut grid-template-rows untuk mentakrifkan baris grid. Berikut ialah contoh yang mentakrifkan grid sebagai tiga baris dan tiga lajur:

rrreee

Jika kita ingin menetapkan jarak setiap item grid, kita boleh menggunakan grid-gap atribut . Berikut ialah contoh yang menetapkan jarak antara setiap item grid kepada 20 piksel: #🎜🎜#rrreee#🎜🎜#Selain lajur yang sama lebar, kami juga boleh menetapkan lebar setiap lajur menggunakan nilai lebar tertentu . Berikut ialah contoh yang menetapkan lebar lajur pertama kepada 200 piksel dan lajur kedua dan ketiga kepada lebar automatik: , dan lebar lajur kedua dan ketiga akan dimuatkan secara automatik ke dalam ruang yang tinggal. #🎜🎜##🎜🎜#Selain itu, kami juga boleh menentukan ketinggian baris automatik dengan menetapkan atribut grid-auto-rows. Berikut ialah contoh untuk menetapkan ketinggian autorow kepada ketinggian minimum 50 piksel: #🎜🎜#rrreee#🎜🎜# Dalam contoh ini, ketinggian autorow akan melaraskan secara automatik berdasarkan ketinggian kandungan, tetapi ketinggian minimum tidak akan kurang daripada 50 piksel. #🎜🎜##🎜🎜#Akhir sekali, kita juga boleh menggunakan atribut grid-template-aas untuk mentakrifkan reka letak kawasan grid. Berikut ialah contoh mentakrifkan grid sebagai reka letak dengan empat kawasan: #🎜🎜#rrreee#🎜🎜#Dalam contoh ini, kami membahagikan kawasan grid kepada empat bahagian: pengepala, kandungan, bar sisi dan pengaki. Setiap kawasan akan diletakkan mengikut susun atur yang ditetapkan. #🎜🎜##🎜🎜#Melalui contoh kod di atas, kita boleh menggunakan reka letak Grid untuk melaksanakan reka letak item grid penyesuaian. Dengan menetapkan sifat dan nilai yang berbeza, kami boleh mengawal bilangan lajur, baris, lebar dan ketinggian grid secara fleksibel untuk mencapai pelbagai kesan reka letak yang kompleks. #🎜🎜##🎜🎜# Saya harap artikel ini akan membantu anda memahami dan menggunakan reka letak Grid. Sekali lagi, reka letak Grid CSS ialah alat yang sangat berkuasa yang boleh memudahkan pelaksanaan reka letak halaman web dan meningkatkan kecekapan pembangunan. #🎜🎜#

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