Bagaimana untuk Mencipta Grid Petak Responsif dengan Kandungan Berpusat?

Grid Petak Responsif

Dalam urutan Limpahan Tindanan ini, pengguna bertanya tentang membuat reka letak petak responsif dengan menegak dan mendatar kandungan sejajar.

Penyelesaian Asal 2018 segi empat sama. Reka bentuk responsif dicapai menggunakan pertanyaan media.

</p>.bekas {<p> paparan: flex;<br> flex-direction: row;<br> flex-wrap: wrap; <br> justify-content: ruang sekeliling;<br>}<br><br>.persegi {</p> lebar: 100px;<p> tinggi: 100px;<br> paparan: flex;<br> jajar-item: tengah;<br> justify-content: center;<br>}<br><br>@media (lebar maksimum: 768px) {</p> .persegi {<p><br></p>}<pre class="brush:php;toolbar:false">width: 50%;

}

Penyelesaian Kemas Kini (2022 )

Dengan evolusi CSS, beberapa sifat baharu telah diperkenalkan yang memudahkan pelaksanaan susun atur grid segi empat sama:

grid: Mentakrifkan susun atur grid untuk bekas.

• nisbah aspek: Menentukan nisbah aspek setiap item grid, memastikan ia kekal segi empat sama.
• sesuai objek: Mengawal cara imej dipaparkan dalam petak, membenarkan untuk memusatkan dan gelagat pemasangan imej.

.bekas {

paparan: grid;
grid-template-columns: repeat(3, 1fr);
jurang: 2%;
}

.persegi {

nisbah bidang: 1/1;

paparan: lentur;
selaras-item: tengah;
justify-kandungan: tengah;
pelapik: 5%;
warna latar belakang: #1E1E1E ;
warna: #fff;
}

.img persegi {

lebar: 100%;

tinggi: 100%;
padaan objek: mengandungi;
kedudukan objek: tengah;
}

.square.fullImg {

pelapik: 0;

}

.square.fullImg img {

object-fit: cover;

}


Hasil akhir mencipta susun atur grid responsif dengan segi empat sama yang boleh mengandungi pelbagai jenis kandungan, termasuk teks, imej dan senarai, sambil mengekalkan penjajaran dan aspek nisbah.

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