從 CodePen 複製的資訊：
使用列和行的自訂屬性的網格。 它還具有使用簡單的拖曳手柄進行拖曳來調整大小的功能。 調整大小會與網格跨度對齊。
新增了瀏覽器支援基線狀態以提高透明度。
這是 DEV.to 帖子的修訂版本，其中添加了關鍵部分的程式碼區塊：
您好，DEV 社群！ ？
我最近一直在嘗試 CSS 網格，我想分享一個有趣的項目：具有自訂屬性和可調整大小元素的網格。這支筆最初是嘗試創建便當風格的網格，但後來演變成更具活力的東西，具有可自訂的網格尺寸和可拖曳的可調整大小的元素。雖然還有成長的空間（拖曳重新排序是我清單中的下一個！），但我對這個設定已經可以實現的功能感到興奮。
讓我們來分解一下吧！ ？
我使用 @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);
}
這種方法簡化了樣式，並且可以輕鬆地以程式設計方式動態添加元素或調整元素大小。
這個專案展示了現代 CSS 與一些輕量級 JavaScript 相結合來創建互動式和動態佈局的強大功能。透過使用 @property 和 CSS 網格功能，我們為可自訂、可調整大小的網格系統創建了基礎。
未來的計畫包括新增拖曳重新排序功能，以便使用者可以重新排列元素，使網格更具互動性。
為了透明起見，我加入了基準狀態元素來顯示瀏覽器對所使用的實驗功能的支援。
以下是一些有用的鏈接，可幫助您了解有關此項目中使用的 CSS 功能的更多信息：
我很想聽聽您的回饋或進一步改進的想法！請在評論中告訴我您的想法，或者隨意分叉 Pen 並使其成為您自己的想法。 ？
編碼愉快！ ?✨
以上是具有自訂屬性和可調整大小元素的動態網格佈局（@properties）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
