Bagaimanakah Saya Boleh Membuat Grid Petak Responsif dengan Kandungan Berpusat Menggunakan CSS?

Grid Petak Responsif

Membuat reka letak yang memaparkan petak responsif dengan kandungan yang dijajarkan secara menegak dan mendatar melibatkan pelaksanaan teknik CSS tertentu.

Grid CSS Reka letak

Untuk mencipta reka letak berasaskan grid, gunakan sifat grid CSS untuk menentukan struktur grid. Dalam grid, gunakan grid-template-lajur untuk menentukan bilangan dan lebar lajur bagi petak. Contohnya:

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

Definisi Persegi

Untuk menentukan petak individu, buat kelas untuk mereka dan gunakan gaya berikut:

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

Responsif Saiz

Untuk memastikan petak kekal responsif, gunakan dimensi berasaskan peratusan untuk lebar dan tinggi. Tetapkan nisbah bidang setiap segi empat sama kepada 1:1 menggunakan nisbah bidang: 1 / 1;.

Penjajaran Menegak

Untuk menjajarkan kandungan dalam petak secara menegak , gunakan align-item: center; dalam kelas CSS segi empat sama.

Penjajaran Mendatar

Untuk penjajaran mendatar, gunakan justify-content: center; ke kelas CSS segi empat sama.

Pengendalian Imej

Untuk mengendalikan imej, gunakan object-fit: contain; untuk memastikan ia terkandung dalam segi empat sama dengan nisbah bidangnya dipelihara. Sebagai alternatif, gunakan object-fit: cover; untuk meregangkan imej untuk menutup segi empat sama.

Untuk penyesuaian dan responsif selanjutnya, pertimbangkan untuk menggunakan pertanyaan media untuk melaraskan reka letak grid dan gaya segi empat sama berdasarkan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Grid Petak Responsif dengan Kandungan Berpusat Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!