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

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

WBOY

Lepaskan： 2023-10-27 08:11:20

asal

1019 orang telah melayarinya

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

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

Dalam pembangunan bahagian hadapan, reka letak halaman web ialah pautan penting. Dalam reka letak halaman web moden, susun atur Grid telah menjadi pilihan yang sangat popular. Ia boleh membantu kami membina pelbagai susun atur grid dengan cepat dan fleksibel, serta boleh mencapai kesan penyesuaian. Artikel ini akan memperkenalkan cara menggunakan susun atur Grid untuk susun atur grid penyesuaian dan memberikan contoh kod khusus.

1. Pengenalan kepada Tata Letak Grid

Reka letak grid ialah modul dalam CSS yang menyediakan keupayaan untuk membahagikan halaman web kepada baris dan lajur. Kami boleh melaksanakan susun atur grid penyesuaian dengan menetapkan bekas grid dan item grid.

Bekas grid ialah langkah pertama untuk menggunakan susun atur Grid. Kita perlu memilih elemen dalam dokumen HTML sebagai bekas grid dan menggunakan display: grid dalam CSS untuk menentukan bahawa bekas menggunakan reka letak Grid. Contohnya: display: grid来指定该容器使用Grid布局。例如：

.container {
  display: grid;
}

Salin selepas log masuk

接下来，我们可以通过设置grid-template-columns和grid-template-rows属性来定义网格容器的行和列。这两个属性接受一个值列表，每个值代表一个网格单元的大小。例如：

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

Salin selepas log masuk

上述代码会将网格容器划分为两列（每列宽度为网格容器宽度的一半）和两行（分别为100px和200px高）。

接着，我们可以将网格项放置在网格容器中。网格项是网格容器的直接子元素，可以使用grid-column和grid-row属性来指定网格项在网格中的位置。例如：

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Salin selepas log masuk

上述代码会将网格项放置在第一列的位置，并跨越两列和一行。

二、自适应网格布局

使用Grid布局可以实现自适应的网格布局，这意味着网格项可以跟随网页的大小进行自动调整。在实际开发中，经常会遇到需要在不同的屏幕尺寸下展示不同的布局的情况。Grid布局可以很好地满足这个需求。

在实现自适应的网格布局时，我们可以使用minmax

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Salin selepas log masuk

Seterusnya, kita boleh mentakrifkan baris dan lajur bekas grid dengan menetapkan sifat grid-template-columns dan grid-template-rows. Kedua-dua sifat ini menerima senarai nilai, setiap satu mewakili saiz sel grid. Contohnya:

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Salin selepas log masuk

Kod di atas akan membahagikan bekas grid kepada dua lajur (setiap lajur ialah separuh lebar bekas grid) dan dua baris (masing-masing 100px dan 200px tinggi).

Seterusnya, kita boleh meletakkan item grid dalam bekas grid. Item grid ialah elemen anak langsung bagi bekas grid Anda boleh menggunakan atribut grid-column dan grid-row untuk menentukan kedudukan item grid dalam grid. Contohnya:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }
  
    .item {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas akan meletakkan item grid pada kedudukan lajur pertama dan menjangkau dua lajur dan satu baris.

2. Susun Adaptif Grid

Menggunakan susun atur Grid boleh mencapai susun atur grid suai, yang bermaksud item grid boleh melaraskan secara automatik mengikut saiz halaman web. Dalam pembangunan sebenar, kita sering menghadapi situasi di mana kita perlu memaparkan reka letak yang berbeza pada saiz skrin yang berbeza. Susun atur grid boleh memenuhi keperluan ini dengan baik.

Apabila melaksanakan reka letak grid penyesuaian, kita boleh menggunakan fungsi minmax untuk menetapkan julat saiz bekas grid atau item grid. Fungsi ini menerima dua parameter, parameter pertama mewakili nilai minimum, dan parameter kedua mewakili nilai maksimum. Contohnya:

rrreee

Kod di atas akan menetapkan lebar setiap lajur bekas grid kepada 200px dan secara automatik mengisi kawasan kosong bekas grid.

Pada peranti mudah alih, kami mungkin mahu melaraskan reka letak grid kepada satu lajur. Anda boleh menggunakan pertanyaan media untuk mencapai kesan ini. Contohnya: 🎜rrreee🎜Kod di atas akan melaraskan bekas grid kepada satu lajur apabila lebar skrin kurang daripada 768px. 🎜🎜3. Contoh kod khusus🎜🎜Berikut ialah contoh kod khusus susun atur grid menggunakan susun atur Grid: 🎜rrreee🎜Kod di atas akan membahagikan bekas grid kepada berbilang lajur, setiap lajur mempunyai lebar 200px dan akan secara automatik mengisi kawasan kosong. Apabila lebar skrin kurang daripada 768px, bekas grid akan dilaraskan kepada paparan lajur tunggal. 🎜🎜Ringkasan🎜🎜Reka letak grid ialah alat reka letak grid yang berkuasa yang boleh membantu kami membina reka letak halaman web dengan cepat dan fleksibel. Reka letak grid boleh digunakan untuk melaksanakan susun atur grid penyesuaian, membenarkan halaman web memaparkan reka letak yang berbeza pada saiz skrin yang berbeza. Melalui contoh kod yang disediakan dalam artikel ini, saya percaya pembaca boleh lebih memahami dan menggunakan susun atur Grid untuk susun atur grid penyesuaian. 🎜

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