您是否探索过网格自动流的力量：密集？当与随机生成的值（限制在设定范围内）结合使用时，您可以使用网格列和网格行属性来创建很酷的基于网格的艺术。让我们开始吧！
首先，让我们创建一个基本网格结构：
main {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill,
minmax(var(--w, 4cqi), 1fr));
}
此时，--w未定义，因此使用默认值（4cqi）。初始网格如下所示：
接下来，我们将用一堆 -节点填充网格。当我们使用 JavaScript 渲染它们时，我们为每个节点添加 2 个变量：
以下是我们如何在 JavaScript 中生成随机值：
const random = (min, max) =>
Math.random() * (max - min) + min
const column = () =>
`--gc:${Math.floor(random(0, 4))};`
const row = () =>
`--gr:${Math.floor(random(0, 3))};`
在 CSS 中，我们应用这些自定义属性：
b {
background: oklch(var(--l) var(--c) var(--h) / var(--a));
grid-column: span var(--gc);
grid-row: span var(--gr, 1);
}
我们还可以使用一个小辅助方法在 oklch 中添加一些随机颜色：
const color = () => `--l:${
random(0, 100)}%;--c:${
random(0, 0.5)};--h:${
random(0, 60)};--a:${
random(0.2, 1)};`
现在我们得到：
谢谢你，grid-auto-flow：密集！
为了使事情更加动态，让我们添加旋转和缩放等转换：
b {
rotate: var(--r);
scale: var(--s);
}
在 JavaScript 中，我们生成随机转换值：
const transform = () =>
`--r:${random(-2, 3)}deg;
--s:${random(0.8, 1.2)};`
我们来看看：
太棒了！现在，为了更进一步，让我们添加一些很酷的 SVG 滤镜。
在 JavaScript 中，我们添加了另一个小辅助方法来为每个 节点选择一个随机过滤器：
const filter = () =>
`--url:url(#${
[
"pencilTexture",
"pencilTexture2",
"pencilTexture3",
"pencilTexture4",
][Math.floor(random(0, 4))]
});`
这给了我们：
现在，通过简单地调整 --w 属性和元素数量，我们就可以生成截然不同的艺术作品：
或者：
我们还可以在颜色方法中调整开始值和停止值：
这是一个 Codepen 演示。我在图稿下方添加了控件，因此您可以轻松调整属性：
以上是使用 CSS 网格和 SVG 滤镜进行艺术创作的详细内容。更多信息请关注PHP中文网其他相关文章！
