Bagaimana untuk Mencipta Grid Petak Responsif Menggunakan CSS?

Membuat Grid Petak Responsif

Pengenalan:
Membuat reka letak yang menampilkan petak responsif selalunya boleh menjadi tugas yang mencabar. Walau bagaimanapun, dengan bantuan teknik CSS, mencapai kesan ini adalah mungkin.

Reka Letak Petak Responsif:
Contoh yang disediakan menunjukkan grid segi empat sama dengan kandungan yang dijajarkan secara menegak dan mendatar. Untuk melaksanakan reka letak ini, kami akan menggunakan sifat "grid" dan "nisbah aspek".

Pelaksanaan CSS:
Kod CSS di bawah menetapkan grid dan menetapkan aspek nisbah setiap segi empat sama untuk mengekalkan bentuk segi empat sama:

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

.square {
  aspect-ratio: 1 / 1;
}

Kandungan Penjajaran:
Untuk menjajarkan kandungan dalam setiap petak, kami akan menggunakan sifat "flex" dan sifat "align-item":

.square {
  display: flex;
  align-items: center;
}

Pengendalian Kandungan Fleksibel:
Petak boleh memuatkan pelbagai jenis kandungan, termasuk teks, imej dan senarai. Untuk memastikan kandungan kekal berpusat, kami akan menggunakan padding yang sesuai dan memastikan imej terkandung dalam petak:

.square {
  padding: 5%;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

Imej Lebar Penuh:
Untuk petak yang memaparkan penuh- imej lebar, kami akan mengalih keluar padding dan melaraskan sifat muat objek untuk menutup segi empat sama sepenuhnya:

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

Saiz Dinamik:
Dengan mentakrifkan sifat "grid-template-columns" sebagai "repeat(3, 1fr)", segi empat sama melaraskan lebarnya secara dinamik berdasarkan ruang yang tersedia, mengekalkan reka letak responsif pada saiz skrin yang berbeza.

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