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

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

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

---

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

---

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

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

我最近一直在嘗試 CSS 網(wǎng)格，我想分享一個(gè)有趣的項(xiàng)目：具有自定義屬性和可調(diào)整大小元素的網(wǎng)格。這支筆最初是嘗試創(chuàng)建便當(dāng)風(fēng)格的網(wǎng)格，但后來(lái)演變成更具活力的東西，具有可定制的網(wǎng)格尺寸和可拖動(dòng)的可調(diào)整大小的元素。雖然還有增長(zhǎng)的空間（拖動(dòng)重新排序是我列表中的下一個(gè)?。覍?duì)這個(gè)設(shè)置已經(jīng)可以實(shí)現(xiàn)的功能感到興奮。

讓我們來(lái)分解一下吧！ ？

---

?? 它是如何運(yùn)作的

@屬性

我使用 @property at-rule 來(lái)定義自定義屬性，這增加了類型安全性并控制繼承。這是該項(xiàng)目的一個(gè)示例：

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

這些屬性允許以最小的努力動(dòng)態(tài)調(diào)整網(wǎng)格布局，無(wú)論是通過(guò) 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);
}

拖動(dòng)調(diào)整大小

每個(gè)網(wǎng)格元素都有一個(gè)可拖動(dòng)的角手柄，可讓用戶在將元素對(duì)齊到網(wǎng)格時(shí)調(diào)整元素的大小。拖動(dòng)手柄的樣式如下：

.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 實(shí)現(xiàn)的，將元素的大小與網(wǎng)格跨度對(duì)齊。以下是調(diào)整大小工作原理的簡(jiǎn)化片段：

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 控制每個(gè)網(wǎng)格項(xiàng)的默認(rèn)大小。以下是它們的應(yīng)用方式：

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

這種方法簡(jiǎn)化了樣式，并且可以輕松地以編程方式動(dòng)態(tài)添加元素或調(diào)整元素大小。

---

自己測(cè)試一下吧！

---

？結(jié)論

這個(gè)項(xiàng)目展示了現(xiàn)代 CSS 與一些輕量級(jí) JavaScript 相結(jié)合來(lái)創(chuàng)建交互式和動(dòng)態(tài)布局的強(qiáng)大功能。通過(guò)使用 @property 和 CSS 網(wǎng)格功能，我們?yōu)榭啥ㄖ?、可調(diào)整大小的網(wǎng)格系統(tǒng)創(chuàng)建了基礎(chǔ)。

未來(lái)的計(jì)劃包括添加拖動(dòng)重新排序功能，以便用戶可以重新排列元素，使網(wǎng)格更具交互性。

為了透明起見(jiàn)，我添加了基線狀態(tài)元素來(lái)顯示瀏覽器對(duì)所使用的實(shí)驗(yàn)功能的支持。

---

？資源

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

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

---

我很想聽(tīng)聽(tīng)您的反饋或進(jìn)一步改進(jìn)的想法！請(qǐng)?jiān)谠u(píng)論中告訴我您的想法，或者隨意分叉 Pen 并使其成為您自己的。 ？

編碼愉快！ ??

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