Membuat Grid Masonry dengan Reka Letak Grid CSS

Dalam CSS, mencapai kesan grid dengan unsur-unsur ketinggian yang berbeza-beza mungkin mencabar. Walau bagaimanapun, Reka Letak Grid CSS yang diperkenalkan baru-baru ini menawarkan penyelesaian yang berkuasa.

Menggunakan Reka Letak Grid CSS

Untuk mencipta grid batu menggunakan Reka Letak Grid CSS, anda boleh mengikuti langkah ini :

1. Tentukan bekas grid: Gunakan paparan: sifat grid untuk mencipta bekas grid.
2. Tetapkan ketinggian baris automatik: Gunakan sifat grid-auto-rows untuk menentukan ketinggian lalai bagi setiap baris dalam grid. Ini memastikan bahawa elemen dalam baris yang berbeza mempunyai jarak yang sama secara menegak.
3. Laraskan jarak: Gunakan sifat jurang grid untuk menetapkan jarak antara item grid, secara mendatar dan menegak.
4. Tentukan saiz lajur: Gunakan sifat grid-template-columns untuk menentukan saiz lajur dalam grid. Di sini, kami menetapkan autoisi untuk membuat grid dengan saiz lajur yang fleksibel, manakala minmax(30%, 1fr) memastikan bahawa lajur sekurang-kurangnya 30% lebar dan boleh berkembang mengikut keperluan.

Melaksanakan Grid Masonry

Berikut ialah contoh kod HTML dan CSS untuk mencipta grid masonry:

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

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

Kod ini akan mencipta grid masonry di mana unsur-unsur ketinggian berbeza dibentangkan secara automatik dalam jarak sama rata, struktur seperti grid.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat grid batu menggunakan Tata Letak Grid CSS dengan unsur-unsur ketinggian yang berbeza-beza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!