具有自定义属性和可调整大小元素的动态网格布局 (@properties)

从 CodePen 复制的信息：

网格使用列和行的自定义属性。

它还具有通过简单的拖动手柄进行拖动调整大小的功能。

调整大小与网格跨度对齐。

浏览器支持基线状态以提高透明度。

以下是 DEV.to 帖子的修订版本，其中添加了关键部分的代码块：

具有自定义属性和可调整大小元素的网格

你好，开发者社区！👋

我最近一直在尝试 CSS 网格，我想分享一个有趣的项目：。这支笔最初是尝试创建一个 Bento 风格的网格，但后来演变成更具动态的东西，具有可自定义的网格尺寸和可拖动的可调整大小元素。虽然还有发展空间（拖动以重新排序是我列表中的下一个！），但我对这种设置已经可能实现的功能感到兴奋。

让我们来详细分析一下！🎉

🛠️ 工作原理

@财产

我使用 `@property` 规则来定义自定义属性，这增加了类型安全性并控制继承。以下是项目中的一个示例：

@property --grid-cols {
  syntax: "";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "";
  inherits: false;
  initial-value: 12;
}

@property --col-span {
  syntax: "";
  inherits: false;
  initial-value: 2;
}

@property --row-span {
  syntax: "";
  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);
}

拖拽调整大小

每个网格元素都有一个可拖动的角手柄，让用户可以在将元素贴靠到网格时调整元素的大小。`drag-handle` 的样式如下：

.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

自定义属性 `--col-span` 和 `--row-span` 控制每个网格项的默认大小。它们的应用方式如下：

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

这种方法简化了样式，并且可以轻松地以编程方式动态添加或调整元素大小。

自己测试一下吧！

📌 结论

该项目展示了现代 CSS 与一些轻量级 JavaScript 相结合的强大功能，可用于创建交互式动态布局。通过使用“@property”和 CSS 网格功能，我们为可自定义、可调整大小的网格系统奠定了基础。

未来计划包括添加拖动重新排序功能，以便用户可以重新排列元素，使网格更具交互性。

为了透明起见，我添加了基线状态元素来显示浏览器对所使用的实验功能的支持。

📚 资源

以下是一些有用的链接，可帮助您了解有关该项目中使用的 CSS 功能的更多信息：

MDN: @property

MDN：CSS 网格布局

MDN：级联层

MDN：起始样式

MDN：相对颜色：直接在 CSS 中简化颜色调整。

MDN：逻辑属性：编写与方向无关的 CSS 以实现多语言支持。

MDN：容器查询：根据容器的大小而不是视口来调整布局。

MDN：currentColor 关键字：在其他 CSS 属性（如边框或背景）中使用当前文本颜色。

MDN：-web-kit-Line Clamp：控制块元素中显示的最大行数。

MDN：转换行为 - Allow-Discrete：定义转换期间离散值如何变化。

我很乐意听取您的反馈或进一步改进的想法！请在评论中告诉我您的想法，或者随意分叉 Pen 并将其变成您自己的。😊

祝你编码愉快！💻✨

CLIS.CC