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

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur auto suai grid

王林

Lepaskan： 2023-10-27 12:18:23

asal

1369 orang telah melayarinya

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur auto suai grid

Tutorial HTML: Cara menggunakan Tata Letak Grid untuk susun atur penyesuaian grid automatik

Dalam reka bentuk web moden, Tata Letak Grid telah menjadi kaedah reka letak yang popular. Ia membolehkan elemen halaman web menyesuaikan secara automatik dengan reka letak dalam sistem grid, supaya halaman itu boleh menunjukkan kesan reka letak yang baik pada saiz skrin yang berbeza. Dalam artikel ini, saya akan memperkenalkan cara menggunakan susun atur Grid untuk melaksanakan susun atur penyesuaian grid automatik dan memberikan beberapa contoh kod khusus.

Susun atur grid ialah sistem susun atur yang berkuasa dalam CSS, yang membolehkan kami mencipta bekas grid dan menyusun elemen di dalamnya. Apabila menggunakan susun atur Grid, anda perlu mencipta bekas grid, iaitu, tetapkan atribut paparan elemen kepada grid atau grid sebaris. Seterusnya, kita boleh menggunakan pelbagai sifat dan nilai untuk menentukan baris grid, lajur, dan kedudukan serta saiz elemen.

Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  background-color: #b21818;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid布局栅格自动适应布局示例</h1>

<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 class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Salin selepas log masuk

Dalam kod ini, kami mula-mula mencipta bekas bernama grid-container dan menetapkan atribut paparannya kepada grid, sekali gus menukar bekas itu menjadi bekas grid. Seterusnya, kami menggunakan sifat grid-template-columns untuk menentukan bilangan dan lebar lajur bekas grid. Dalam contoh ini, kami telah menentukan tiga lajur auto-lebar dengan jurang 10px antara setiap lajur. Kami juga menetapkan sifat padding untuk menambah sedikit ruang putih pada bekas grid.

Dalam bekas grid, kami menambah 9 elemen kanak-kanak, iaitu grid-item. Setiap elemen mempunyai warna latar belakang, teks sejajar tengah dan saiz fon 30px. Elemen ini secara automatik akan menyesuaikan diri dengan reka letak dalam grid, mengisi keseluruhan bekas grid.

Apabila kami menggunakan reka letak Grid untuk merealisasikan reka letak penyesuaian grid automatik, kami boleh melaraskan lebar setiap lajur secara fleksibel supaya halaman boleh menyesuaikan diri dengan saiz skrin yang berbeza. Anda boleh melaraskan sifat kontena grid dan item grid mengikut keperluan sebenar untuk mencapai kesan reka letak yang anda inginkan.

Selain atribut grid-template-columns, terdapat banyak lagi atribut susun atur Grid yang boleh digunakan, seperti grid-template-rows, grid-gap, grid-row-start, dsb. Dengan menggunakan sifat ini secara fleksibel, kami boleh mencipta pelbagai susun atur grid, bukan hanya contoh di atas.

Untuk meringkaskan, menggunakan susun atur Grid untuk susun atur penyesuaian grid automatik ialah cara yang berkuasa dan fleksibel untuk susun atur halaman web. Dengan menetapkan sifat bekas grid dan sub-item dengan betul, kami boleh mencapai reka letak halaman web dengan kesan tipografi yang baik dengan mudah. Saya harap artikel 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 auto suai grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!