從 CodePen 複製的資訊：

使用列和行的自訂屬性的網(wǎng)格。 它還具有使用簡單的拖曳手柄進行拖曳來調(diào)整大小的功能。 調(diào)整大小會與網(wǎng)格跨度對齊。

新增了瀏覽器支援基線狀態(tài)以提高透明度。

---

這是 DEV.to 帖子的修訂版本，其中添加了關(guān)鍵部分的程式碼區(qū)塊：

---

具有自訂屬性和可調(diào)整大小元素的網(wǎng)格

您好，DEV 社群！ ？

我最近一直在嘗試 CSS 網(wǎng)格，我想分享一個有趣的項目：具有自訂屬性和可調(diào)整大小元素的網(wǎng)格。這支筆最初是嘗試創(chuàng)建便當風(fēng)格的網(wǎng)格，但後來演變成更具活力的東西，具有可自訂的網(wǎng)格尺寸和可拖曳的可調(diào)整大小的元素。雖然還有成長的空間（拖曳重新排序是我清單中的下一個！），但我對這個設(shè)定已經(jīng)可以實現(xiàn)的功能感到興奮。

讓我們來分解一下吧！ ？

---

?? 它是如何運作的

@屬性

我使用 @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;
}

這些屬性允許以最少的努力動態(tài)調(diào)整網(wǎng)格佈局，無論是透過 CSS 還是 JavaScript。例如，您可以使用下列命令設(shè)定網(wǎng)格結(jié)構(gòu)：

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

拖曳調(diào)整大小

每個網(wǎng)格元素都有一個可拖曳的角落手柄，可讓使用者在將元素對齊到網(wǎng)格時調(diào)整元素的大小。拖曳手把的樣式如下：

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

調(diào)整大小邏輯是用 JavaScript 實現(xiàn)的，將元素的大小與網(wǎng)格跨度對齊。以下是調(diào)整大小運作原理的簡化片段：

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 控制每個網(wǎng)格項的預(yù)設(shè)大小。以下是它們的應(yīng)用方式：

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

這種方法簡化了樣式，並且可以輕鬆地以程式設(shè)計方式動態(tài)添加元素或調(diào)整元素大小。

---

自己測試一下吧！

---

？結(jié)論

這個專案展示了現(xiàn)代 CSS 與一些輕量級 JavaScript 相結(jié)合來創(chuàng)建互動式和動態(tài)佈局的強大功能。透過使用 @property 和 CSS 網(wǎng)格功能，我們?yōu)榭勺杂啞⒖烧{(diào)整大小的網(wǎng)格系統(tǒng)創(chuàng)建了基礎(chǔ)。

未來的計畫包括新增拖曳重新排序功能，以便使用者可以重新排列元素，使網(wǎng)格更具互動性。

為了透明起見，我加入了基準狀態(tài)元素來顯示瀏覽器對所使用的實驗功能的支援。

---

？資源

以下是一些有用的鏈接，可幫助您了解有關(guān)此項目中使用的 CSS 功能的更多信息：

• MDN：@property
• MDN：CSS 網(wǎng)格佈局
• MDN：級聯(lián)層
• MDN：起始樣式
• MDN：相對顏色：直接在 CSS 中簡化色彩調(diào)整。
• MDN：邏輯屬性：編寫與方向無關(guān)的 CSS 以實現(xiàn)多語言支援。
• MDN：容器查詢：根據(jù)容器的大小而不是視窗調(diào)整佈局。
• MDN：currentColor 關(guān)鍵字：在其他 CSS 屬性（如邊框或背景）中使用目前文字顏色。
• MDN：-web-kit-Line Clamp：控制區(qū)塊元素中顯示的最大行數(shù)。
• MDN：轉(zhuǎn)換行為 - 允許離散：定義離散值在轉(zhuǎn)換期間如何變化。

---

我很想聽聽您的回饋或進一步改進的想法！請在評論中告訴我您的想法，或者隨意分叉 Pen 並使其成為您自己的想法。 ？

編碼愉快！ ??

以上是具有自訂屬性和可調(diào)整大小元素的動態(tài)網(wǎng)格佈局（@properties）的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！