從 CodePen 復(fù)制的信息：

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

添加了瀏覽器支持基線狀態(tài)以提高透明度。

---

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

---

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

您好，DEV 社區(qū)！ ？

我最近一直在嘗試 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īng)用方式：

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

這種方法簡化了樣式，并且可以輕松地以編程方式動態(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：控制塊元素中顯示的最大行數(shù)。
• MDN：轉(zhuǎn)換行為 - 允許離散：定義離散值在轉(zhuǎn)換期間如何變化。

---

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

編碼愉快！ ??

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