Cara menggunakan CSS untuk melaksanakan susun atur grid responsif-tutorial css-php.cn

Cara menggunakan CSS untuk melaksanakan susun atur grid responsif

PHPz

Lepaskan： 2023-11-21 13:56:23

asal

1002 orang telah melayarinya

Cara menggunakan CSS untuk melaksanakan susun atur grid responsif

Dengan populariti peranti mudah alih dan kemunculan berbilang saiz skrin, Grid web responsif susun atur telah menjadi tumpuan pereka dan pembangun. Menggunakan CSS untuk melaksanakan reka letak grid responsif membolehkan halaman web menyesuaikan diri secara fleksibel kepada saiz skrin dan peranti yang berbeza. Artikel ini akan memperkenalkan cara menggunakan CSS untuk melaksanakan reka letak grid responsif dan memberikan contoh kod khusus.

Menggunakan susun atur Grid CSS

Susun atur Grid CSS ialah sistem susun atur berkuasa yang boleh diatur dalam bentuk grid Susun atur muka surat. Ia adalah sangat mudah untuk menggunakan susun atur Grid untuk melaksanakan reka letak grid responsif Anda hanya perlu menetapkan gaya grid yang sesuai dan sifat penyesuaian.

Pertama, anda perlu menentukan bekas grid dalam helaian gaya halaman web. Anda boleh menggunakan display: grid untuk membuat bekas grid. Contohnya: display: grid来创建一个网格容器。例如：

.grid-container {
  display: grid;
}

Salin selepas log masuk

然后，使用grid-template-columns属性来定义网格容器的列数和列宽。可以使用百分比、em或rem等单位来设置列宽，并使用重复函数（repeat()）来创建重复的列。例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Salin selepas log masuk

这段代码将创建一个包含3列的网格，每列的宽度相等。

接下来，可以使用grid-template-rows属性来定义网格容器的行数和行高，方法与定义列类似。例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
}

Salin selepas log masuk

这段代码将创建一个包含3列和4行的网格，每行的高度都是100px。

媒体查询

为了使网格布局能够适应不同的屏幕尺寸，需要使用媒体查询来设置不同屏幕尺寸下的网格样式。

首先，可以使用@media

@media screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 100px);
  }
}

Salin selepas log masuk

Kemudian, gunakan atribut grid-template-columns untuk mentakrifkan nombor dan lebar lajur bekas grid. Anda boleh menetapkan lebar lajur menggunakan unit seperti peratusan, em atau rem dan menggunakan fungsi ulang (ulang()) untuk mencipta lajur berulang. Contohnya:

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }

    @media screen and (max-width: 600px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 100px);
      }
    }

    .grid-item {
      background-color: #ccc;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <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 class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod ini akan membuat grid dengan 3 lajur, setiap satu sama lebar.

Seterusnya, anda boleh menggunakan atribut grid-template-rows untuk mentakrifkan bilangan baris dan ketinggian baris bekas grid dengan cara yang sama seperti mentakrifkan lajur. Contohnya:

Kod ini akan membuat grid dengan 3 lajur dan 4 baris, setiap baris mempunyai ketinggian 100px.

Untuk membuat reka letak grid menyesuaikan diri dengan saiz skrin yang berbeza, anda perlu menggunakan pertanyaan media untuk tetapkan skrin berbeza Gaya grid di bawah dimensi.

Pertama, anda boleh menggunakan kata kunci @media untuk mentakrifkan pertanyaan media. Gaya grid yang berbeza boleh ditetapkan berdasarkan lebar skrin. Contohnya:

Atas ialah kandungan terperinci Cara menggunakan CSS untuk melaksanakan susun atur grid responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!