Bagaimana untuk Mencipta Susun Atur Grid Responsif dengan Petak Sama Tinggi Menggunakan Grid CSS dan Flexbox?

Reka Letak Grid Responsif dengan Petak Sama Tinggi

Pengenalan

Membuat susun atur grid dengan petak responsif boleh menjadi satu cabaran, terutamanya apabila cuba mengekalkan sama tinggi dan jarak antara segi empat sama. Walaupun kedua-dua CSS Grid dan Flexbox boleh digunakan untuk tujuan ini, artikel ini akan meneroka cara mencapai ini dengan CSS Grid dan helah "padding-bottom".

Menetapkan Tinggi Sama dengan Lebar

Menggunakan Grid CSS

Untuk menetapkan ketinggian petak sama dengan lebarnya menggunakan Grid CSS, gunakan helah "padding-bottom", yang mencipta unsur pseudo yang mengekalkan nisbah bidang segi empat sama. Peraturan CSS berikut boleh digunakan:

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

Ini memastikan petak kekal segi empat sama tidak kira apa kandungannya.

Menggunakan Flexbox

Untuk mencapai kesan yang sama dengan Flexbox, pendekatan serupa boleh digunakan:

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

Dalam Flexbox, sifat kandungan ialah digunakan untuk meletakkan kandungan segi empat sama sepenuhnya di dalamnya.

Menetapkan Longkang Antara Petak

Helah "padding-bottom" juga boleh digunakan untuk membuat longkang antara petak:

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

Ini menambah jurang 10px antara setiap petak.

Responsif Gelagat

Untuk menjadikan reka letak responsif, pertanyaan media boleh digunakan untuk menukar susun atur grid kepada satu lajur untuk saiz skrin yang lebih kecil:

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

Ini memastikan petak disusun secara menegak pada skrin sempit.

Kesimpulan

Dengan menggunakan helah "padding-bottom", kedua-dua CSS Grid dan Flexbox boleh digunakan untuk mencipta susun atur grid responsif dengan segi empat sama tinggi dan longkang di antara mereka. Teknik ini digunakan secara meluas dan menyediakan penyelesaian yang boleh dipercayai untuk keperluan susun atur biasa ini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Susun Atur Grid Responsif dengan Petak Sama Tinggi Menggunakan Grid CSS dan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!