Bagaimana untuk Mencipta Susun Atur Grid Masonry dengan Ketinggian Berbeza-beza dalam CSS?

Grid Masonry CSS dengan Flexbox atau Reka Letak Lain

Membuat susun atur grid dalam CSS yang unsur-unsur mempunyai ketinggian yang berbeza-beza mungkin mencabar. Walaupun flexbox menyediakan fleksibiliti, ia mungkin tidak memenuhi keperluan bahawa elemen yang lebih baharu diselaraskan dengan bahagian bawah yang sebelumnya.

Memperkenalkan Reka Letak Grid CSS

Daripada flexbox, pertimbangkan memanfaatkan CSS Grid Layout untuk tujuan ini. Ia menawarkan cara yang lebih mantap dan intuitif untuk mencapai grid batu:

HTML Struktur:

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

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;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

Penjelasan:

1. paparan: grid: Memulakan bekas sebagai grid reka letak.
2. grid-auto-rows: 50px: Menetapkan ketinggian setiap baris grid kepada 50 pixel.
3. grid-jurang: 10px: Menentukan jarak antara grid item.
4. grid-template-columns: Mentakrifkan bilangan lajur dalam grid (autoisi) dan lebar minimum untuk setiap lajur (min-kandungan: 30%, 1fr) .
5. baris grid: span X: Menunjukkan bahawa item sepatutnya menduduki X bilangan baris grid.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Susun Atur Grid Masonry dengan Ketinggian Berbeza-beza dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!