CodePen?? ??? ??:

?? ?? ?? ??? ?? ??? ???? ??????. ?? ??? ??? ??? ???? ????? ??? ???? ??? ????. ?? ??? ??? ??? ?????.

???? ?? ???? ?? ?? ??? ???????.

---

??? ?? ??? ?? ??? ??? DEV.to? ??? ?????.

---

??? ?? ??? ?? ?? ??? ??? ?? ???

?????, DEV ???? ???! ?

?? CSS ???? ???? ??? ???? ????? ?? ??? ?? ?? ??? ??? ??? ???? ???? ????. ? ?? Bento ???? ???? ??? ?? ??? ?????? ??? ?? ??? ??? ??? ??? ??? ?? ?? ??? ??? ???? ?? ?? ???? ??? ??????. ??? ??? ???(????? ???? ?? ?????!) ? ???? ?? ??? ??? ?? ?????.

??????! ?

---

?? ?? ??

@property

@property at-rule? ???? ?? ???? ?? ??? ???? ??? ?? ??? ??????. ??? ????? ????.

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

??? ??? ???? CSS ?? JavaScript? ?? ???? ???? ??? ????? ???? ??? ? ????. ?? ?? ??? ???? ??? ??? ??? ? ????.

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

????? ?? ??

? ??? ???? ???? ??? ???? ???? ??? ??? ? ?? ??? ??? ??? ??? ????. ??? ??? ???? ??? ????.

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

?? ?? ??? JavaScript? ???? ??? ??? ??? ??? ????. ??? ?? ?? ?? ??? ?? ??? ??????.

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

? ?? ? ? ??

??? ?? ?? --col-span ? --row-span? ? ??? ??? ?? ??? ?????. ?? ??? ??? ????.

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

? ?? ??? ???? ??? ??? ????? ????? ???? ??? ???? ????? ??? ??? ? ????.

---

?? ???????!

---

? ??

? ????? ???? ?? ????? ??? ?? ??? JavaScript? ??? ?? CSS? ??? ??? ?????. @property ? CSS ??? ??? ???? ??? ?? ? ?? ??? ??? ??? ???? ?? ??? ??????.

?? ???? ???? ??? ????? ???? ?? ?? ??? ? ??? ????? ??? ??? ???? ?? ?????.

???? ?? ??? ??? ??? ?? ???? ??? ???? ?? ?? ?? ??? ??????.

---

? ??

??? ? ????? ??? CSS ??? ?? ??? ??? ? ?? ??? ?????.

• MDN: @property
• MDN: CSS ??? ????
• MDN: ????? ???
• MDN: ?? ???
• MDN: ?? ??: CSS?? ?? ?? ??? ??????.
• MDN: ??? ??: ??? ??? ?? ??? ???? ?? CSS? ?????.
• MDN: ???? ??: ???? ?? ???? ??? ???? ????? ?????.
• MDN: currentColor ???: ???? ??? ?? ?? CSS ???? ?? ??? ??? ?????.
• MDN: -web-kit-Line ???: ?? ??? ???? ?? ? ?? ?????.
• MDN: ?? ?? - Allow-Discrete: ?? ?? ?? ?? ??? ????? ?????.

---

?? ??? ?? ????? ????? ?? ????! ??? ???? ??? ?????. ??? ???? ?? ???? ????? ??? ??? ???. ?

??? ?????! ??

? ??? ??? ?? ?? ? ?? ?? ??? ??? ??? ?? ??? ????(@properties)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!