Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Adaptif Grid Grid-html tutorial-php.cn

Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Adaptif Grid Grid

王林

Lepaskan： 2023-10-27 18:28:41

asal

786 orang telah melayarinya

Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Adaptif Grid Grid

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur grid penyesuaian grid, contoh kod khusus diperlukan

Pengenalan:
Dengan pembangunan Internet, susun atur halaman web telah menjadi lebih dan lebih penting. Kaedah reka letak halaman web tradisional, seperti menggunakan jadual atau susun atur terapung, selalunya memerlukan banyak kod dan pelarasan untuk mencapai kesan penyesuaian. Reka letak Grid yang diperkenalkan dalam CSS3 menyediakan cara yang lebih ringkas dan fleksibel untuk membina susun atur grid penyesuaian grid. Artikel ini akan memperkenalkan anda kepada konsep asas dan aplikasi praktikal susun atur Grid dan memberikan anda contoh kod khusus.

Pengenalan susun atur grid
Susun atur grid ialah sistem susun atur grid baharu dalam CSS3, yang boleh membahagikan kandungan halaman web kepada baris dan lajur untuk mencipta reka letak grid. Reka letak grid boleh dilaksanakan melalui dua bahagian: bekas grid dan item grid Bekas grid ialah elemen induk yang mengandungi item grid, dan item grid ialah elemen anak di bawah bekas grid.
Mencipta bekas grid
Pertama, kita perlu mentakrifkan elemen sebagai bekas grid. Dalam HTML, anda boleh menggunakan elemen <div> untuk bertindak sebagai bekas grid. Seperti yang ditunjukkan di bawah: <code><div>元素来充当网格容器。如下所示：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><div class="container">  <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> </div></pre><div class="contentsignin">Salin selepas log masuk</div></div><ol start="3"><li>定义网格布局<br>通过为网格容器设置CSS属性<code>display: grid;，我们可以将其定义为网格布局。此外，还可以使用grid-template-columns和grid-template-rows属性来指定网格的列数和行数。例如，下面的代码将网格容器定义为含有3列和2行的网格布局。

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

Salin selepas log masuk

设置网格项的位置和大小
通过为网格项设置CSS属性grid-column和grid-row，我们可以指定每个网格项在网格布局中的位置。例如，下面的代码将网格项1位于第一列的第一行，网格项2位于第二列的第一行，网格项3位于第三列的第二行，网格项4位于第一列的第二行。

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2;
}

.item4 {
  grid-column: 1;
  grid-row: 2;
}

Salin selepas log masuk

自适应网格布局
在Grid布局中，网格项的大小和位置是可以自适应调整的。我们可以使用grid-template-areas属性来指定每个网格项在网格布局中的位置，并通过使用.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: main;
}

Salin selepas log masuk

display: grid;</ code>, kami boleh mentakrifkannya sebagai susun atur grid. Selain itu, anda juga boleh menggunakan sifat <code>grid-template-columns

grid-template-rows

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

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
```
Salin selepas log masuk
Dengan menetapkan sifat CSS grid-column</code untuk item grid > dan <code>grid-row, kita boleh menentukan kedudukan setiap item grid dalam reka letak grid. Sebagai contoh, kod berikut akan meletakkan item grid 1 dalam baris pertama lajur pertama, item grid 2 dalam baris pertama lajur kedua, item grid 3 dalam baris kedua lajur ketiga dan item grid 4 dalam Baris kedua lajur pertama.
```
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .item1 {
      grid-column: 1;
      grid-row: 1;
      background-color: red;
    }

    .item2 {
      grid-column: 2;
      grid-row: 1;
      background-color: green;
    }

    .item3 {
      grid-column: 1 / span 2;
      grid-row: 2;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>
</html>
```
Salin selepas log masuk