Bagaimanakah Saya Boleh Membuat Reka Letak Gaya Masonry Hanya Menggunakan CSS?

Membuat Reka Letak Gaya Masonry Menggunakan CSS Tulen

Susun atur gaya batu dicirikan oleh lajur ketinggian berubah-ubah dan elemen yang mungkin menjangkau berbilang lajur. Mencapai kesan ini dengan CSS sahaja boleh mencabar, tetapi ia boleh dilakukan dengan bantuan Grid CSS atau Reka Letak Kotak Fleksibel (Flexbox).

Menggunakan Grid CSS

CSS Grid ialah sistem susun atur dua dimensi yang memberikan kawalan yang lebih besar ke atas kedudukan elemen pada halaman web. Untuk mencipta reka letak gaya batu menggunakan Grid CSS, anda boleh menggunakan sifat grid-template-columns dan grid-template-rows untuk menentukan struktur reka letak. Contohnya:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
}

Kod ini mencipta grid dengan berbilang lajur dengan lebar yang sama yang melaraskan secara automatik berdasarkan ruang yang tersedia. Elemen kemudiannya boleh diletakkan dalam sel grid menggunakan sifat grid-lajur dan grid-row.

Menggunakan Flexbox

Flexbox ialah satu lagi modul susun atur CSS yang membenarkan kedudukan fleksibel elemen dalam bekas. Untuk mencipta reka letak gaya batu menggunakan Flexbox, anda boleh menggunakan sifat arah-flex dan justify-content. Contohnya:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Kod ini mencipta bekas dengan arah lentur menegak dan mengedarkan elemen sama rata dalam ketinggian yang tersedia. Anda kemudiannya boleh menggunakan harta max-width untuk mengawal lebar setiap elemen dan mencapai kesan seperti batu.

Limitation

Sementara Grid CSS dan Flexbox boleh digunakan untuk membuat susun atur gaya batu, terdapat beberapa batasan untuk dipertimbangkan. Grid CSS hanya disokong dalam penyemak imbas moden dan Flexbox mungkin tidak sesuai untuk reka letak yang sangat dinamik. Dalam kes di mana anda memerlukan keupayaan reka letak yang lebih maju, anda mungkin perlu menggunakan rangka kerja JavaScript atau CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Gaya Masonry Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!