从 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中文网其他相关文章！
