Reka Letak Grid Dinamik dengan Sifat Tersuai dan Elemen Boleh Resizable (@sifat)

Maklumat yang disalin daripada CodePen:

Grid menggunakan sifat tersuai untuk lajur dan baris. Ia juga mempunyai ciri seret untuk mengubah saiz, menggunakan pemegang seret yang mudah. Saiz semula diambil pada rentang grid.

Status garis dasar sokongan penyemak imbas ditambahkan untuk ketelusan.

---

Berikut ialah versi semakan DEV.untuk menyiarkan dengan blok kod ditambahkan untuk bahagian penting:

---

Grid dengan Sifat Tersuai dan Elemen Boleh Resizable

Helo, komuniti DEV! ?

Saya telah bereksperimen dengan grid CSS kebelakangan ini dan saya ingin berkongsi projek yang menyeronokkan: Grid dengan Sifat Tersuai dan Elemen Boleh Resizable. Pen ini bermula sebagai percubaan untuk mencipta grid gaya Bento tetapi berkembang menjadi sesuatu yang lebih dinamik, menampilkan dimensi grid yang boleh disesuaikan dan elemen boleh ubah saiz yang boleh diseret. Walaupun masih ada ruang untuk berkembang (seret-untuk-susun semula adalah seterusnya dalam senarai saya!), saya teruja dengan perkara yang boleh dilakukan dengan persediaan ini.

Mari pecahkannya! ?

---

?️ Bagaimana Ia Berfungsi

@harta benda

Saya menggunakan @property at-rule untuk menentukan sifat tersuai, yang menambah keselamatan jenis dan warisan kawalan. Berikut ialah contoh daripada projek:

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --col-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

@property --row-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

Sifat ini membenarkan reka letak grid dilaraskan secara dinamik dengan usaha yang minimum, sama ada melalui CSS atau JavaScript. Sebagai contoh, anda boleh menetapkan struktur grid dengan:

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--grid-gap);
}

Seret untuk Ubah Saiz

Setiap elemen grid mempunyai pemegang sudut yang boleh diseret yang membolehkan pengguna mengubah saiz elemen sambil menyentapnya ke grid. Pemegang seret digayakan seperti ini:

.grid-element .drag-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: skyblue;
  border-radius: 50%;
  cursor: nwse-resize;
}

Logik saiz semula dilaksanakan dalam JavaScript, memendekkan saiz elemen kepada rentang grid. Berikut ialah coretan ringkas tentang cara mengubah saiz berfungsi:

dragHandle.addEventListener('mousedown', (event) => {
  const startX = event.clientX;
  const startY = event.clientY;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(e) {
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    // Calculate new spans based on the grid dimensions
    const colSpan = Math.max(1, Math.round(deltaX / gridCellWidth));
    const rowSpan = Math.max(1, Math.round(deltaY / gridCellHeight));

    gridElement.style.gridColumnEnd = `span ${colSpan}`;
    gridElement.style.gridRowEnd = `span ${rowSpan}`;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});

span-col dan span-row

Sifat tersuai --col-span dan --row-span mengawal saiz lalai setiap item grid. Begini cara ia digunakan:

.grid-element {
  grid-column: span var(--col-span);
  grid-row: span var(--row-span);
}

Pendekatan ini memudahkan penggayaan dan memudahkan untuk menambah atau mengubah saiz elemen secara dinamik secara pemprograman.

---

Uji sendiri!

---

? Kesimpulan

Projek ini mempamerkan kuasa CSS moden digabungkan dengan beberapa JavaScript ringan untuk mencipta reka letak interaktif dan dinamik. Dengan menggunakan ciri grid @property dan CSS, kami telah mencipta asas untuk sistem grid boleh disesuaikan dan boleh diubah saiz.

Rancangan masa hadapan termasuk menambah fungsi seret untuk menyusun semula supaya pengguna boleh menyusun semula elemen, menjadikan grid lebih interaktif.

Untuk ketelusan, saya telah memasukkan elemen status garis dasar untuk menunjukkan sokongan penyemak imbas untuk ciri percubaan yang digunakan.

---

? Sumber

Berikut ialah beberapa pautan berguna untuk mengetahui lebih lanjut tentang ciri CSS yang digunakan dalam projek ini:

• MDN: @property
• MDN: Reka Letak Grid CSS
• MDN: Lapisan Lata
• MDN: Gaya Permulaan
• MDN: Warna Relatif: Permudahkan pelarasan warna secara langsung dalam CSS.
• MDN: Sifat Logik: Tulis CSS arah-agnostik untuk sokongan berbilang bahasa.
• MDN: Pertanyaan Kontena: Sesuaikan reka letak berdasarkan saiz bekas dan bukannya port pandangan.
• MDN: currentColor Kata Kunci: Gunakan warna teks semasa dalam sifat CSS lain seperti sempadan atau latar belakang.
• MDN: -web-kit-Line Clamp: Kawal bilangan maksimum baris yang dipaparkan dalam elemen blok.
• MDN: Gelagat Peralihan - Allow-Discrete: Tentukan cara nilai diskret berubah semasa peralihan.

---

Saya ingin mendengar maklum balas atau idea anda untuk penambahbaikan selanjutnya! Beritahu saya apa yang anda fikirkan dalam ulasan, atau jangan ragu untuk mencantas Pen dan menjadikannya milik anda. ?

Selamat pengekodan! ?✨

Atas ialah kandungan terperinci Reka Letak Grid Dinamik dengan Sifat Tersuai dan Elemen Boleh Resizable (@sifat). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!