Bagaimana untuk Membuat Grid Masonry dengan Reka Letak Grid CSS?

Buat Grid Masonry dengan Reka Letak Grid CSS

Mencapai susun atur grid responsif di mana elemen mempunyai ketinggian berubah-ubah tetapi lebar yang sama boleh mencabar menggunakan flexbox atau terapung. Sebaliknya, pertimbangkan untuk menggunakan modul Reka Letak Grid CSS yang berkuasa.

Reka Letak Grid CSS menawarkan penyelesaian yang fleksibel dan cekap untuk mencipta reka letak grid yang kompleks:

1. Paparan: Tetapkan elemen bekas untuk dipaparkan: grid untuk menunjukkan ia bekas grid.
2. Grid Auto-Rows: Tentukan ketinggian yang konsisten untuk baris grid menggunakan grid-auto-rows: 50px. Ini menetapkan ketinggian lalai untuk setiap baris.
3. Jurang Grid: Tambahkan jarak antara item grid dengan jurang grid: 10px.
4. Lajur Templat Grid: tentukan susun atur lajur menggunakan grid-template-lajur: ulangi(autoisi, minmax(30%, 1fr)). Ini mencipta grid dengan lajur sekurang-kurangnya 30% lebar, mengisi ruang yang tinggal sama rata.
5. Spanning Rows: Gunakan sifat grid-row pada item grid individu untuk mengawal bilangan barisnya rentang. Contohnya, [tinggi] menjangkau dua baris, manakala [tertinggi] menjangkau empat.

Contoh HTML:

<grid-container>
  <grid-item short></grid-item>
  <!-- ... more grid items -->
</grid-container>

Contoh CSS:

grid-container {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

[short] {
  grid-row: span 1;
  background-color: green;
}

/* ... more grid item styles */

Dengan menggunakan peraturan CSS ini, anda boleh mencapai seperti Masonry sistem grid di mana elemen melaraskan ketinggiannya secara dinamik, memastikan reka letak yang seimbang dan responsif.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Grid Masonry dengan Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!