Bagaimana untuk Mencipta Susun Atur Grid Responsif Petak Bersaiz Sama Menggunakan Grid CSS atau Flexbox?

Reka Letak Grid Responsif dengan Petak Sama Saiz

Masalah:

Reka susun atur grid responsif yang terdiri daripada segi empat sama bersaiz , dengan jarak longkang yang boleh disesuaikan. Pertimbangkan kedua-dua pendekatan Grid CSS dan Flexbox.

Penyelesaian:

Grid CSS dengan Trik Padding:

Gunakan "padding -bottom" helah untuk memaksa perkadaran segi empat sama. Tambahkan elemen pseudo dengan peratusan pelapik bahagian bawah sepadan dengan nisbah aspek segi empat sama yang diingini (cth., 100%). Ini menyerupai ketinggian tetap untuk bekas segi empat sama.

.square {
  position: relative;
  ...
  padding-bottom: 100%;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

Flexbox dengan Kedudukan Mutlak:

Gunakan reka letak Flexbox dengan unsur pseudo. Tetapkan ketinggian unsur pseudo kepada nisbah bidang segi empat sama (cth., 100%) dan letakkan kandungan sepenuhnya dalam bekas segi empat sama.

.square {
  position: relative;
  ...
  flex-grow: 0;
}

.square::before {
  content: '';
  display: block;
  height: 100%;
}

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

Jarak Longkang:

Untuk kedua-dua pendekatan, gunakan margin atau padding pada elemen segi empat sama untuk mencipta talang.

Nota: Pastikan kandungan berada dalam kedudukan mutlak dalam petak untuk mengekalkan nisbah bidang.

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