Rumah > Artikel > hujung hadapan web > Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Adaptif Grid Grid

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

王林asal: 2023-10-27 18:28:41752semak imbas

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>元素来充当网格容器。如下所示：<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><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;
}

设置网格项的位置和大小
通过为网格项设置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;
}

自适应网格布局
在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;
}

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;
  }
}

grid-column

grid-row

<!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>

Dalam susun atur Grid, saiz dan kedudukan item grid boleh dilaraskan secara adaptif. Kita boleh menggunakan atribut grid-template-areas untuk menentukan kedudukan setiap item grid dalam reka letak grid dan mewakili ruang dengan menggunakan aksara .. Contohnya, kod berikut mentakrifkan bekas grid sebagai susun atur grid dengan dua lajur dan dua baris dan meletakkan setiap item grid dalam kedudukan yang berbeza.

.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;
}

Reka Letak Grid Responsif

Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Adaptif Grid Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css css3 html display column

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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

Artikel berkaitan