Bagaimana untuk Mencipta Kesan Grid Masonry dengan Reka Letak Grid CSS?

Buat Reka Letak Grid CSS untuk Kesan Grid Batu

Cabaran: Elemen Grid Ketinggian Tidak Sekata

Untuk mencapai kesan grid batu, anda mahu elemen ketinggian yang berbeza-beza untuk diselaraskan dengan sempurna tanpa menjejaskan kedudukan elemen di bawah. Walau bagaimanapun, kaedah tradisional seperti floats atau flexbox mungkin tidak memenuhi keperluan ini sepenuhnya.

Penyelesaian: CSS Grid Layout

Untuk prestasi optimum, pertimbangkan untuk menggunakan CSS Grid Layout, alat berkuasa yang direka khusus untuk mengendalikan susun atur grid kompleks:

1. Tentukan Sifat Grid (grid-container): Mulakan dengan mentakrifkan bekas grid dengan paparan: grid. Tetapkan grid-auto-rows kepada ketinggian baris lalai yang diingini (cth., 50px). grid-gap mengawal jarak antara elemen grid.
2. Tetapkan Lajur Secara Automatik (grid-template-columns): Gunakan repeat(auto-fill, minmax(30%, 1fr)) untuk mencipta lajur yang melaraskan lebarnya secara automatik berdasarkan ruang yang tersedia. Minimum 30% memastikan elemen mempunyai lebar yang mencukupi.
3. Laraskan Span Baris (baris grid): Gunakan sifat baris grid pada elemen individu untuk menentukan bilangan baris yang diduduki. Hanya tentukan span 1, span 2, dsb., mengikut ketinggian yang diingini.

Contohnya:

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

.short {
  grid-row: span 1;
}

.tall {
  grid-row: span 2;
}

.taller {
  grid-row: span 3;
}

.tallest {
  grid-row: span 4;
}

Kod ini akan mencipta grid di mana elemen berbeza secara automatik dalam lebar tanpa menjejaskan penjajaran grid. Ketinggian setiap elemen ditentukan oleh rentang baris yang ditetapkan.

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