具有交替行的简单网格

介绍

这是一个简单的演示，展示了如何拥有一些具有交替行的简单网格。在此示例中，一行包含三个项目，另一行包含两个项目。
这是一个 100% CSS 解决方案，归结为使用 @property 作为 grid-columns 属性的跨度值。

---

它是如何运作的

嗯，很简单。您需要知道将有多少个不同的行以及这些不同的行总共包含多少个项目。

在我的示例中，这将是：

• 2 个不同的行
• 3 件 2 件 = 5 件

这意味着在执行 :nth-child() 选择器时，您必须使用该总数：

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

col-span 自定义属性的使用方式如下：

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

差不多就是这样了。它非常简单，没什么大不了的，但对每个人仍然有用。

---

更适合设计师但更复杂的解决方案

对于设计师更友好的解决方案，我认为声明实际的项目数量而不是更改跨度，因为如果更改网格中的列数，但忘记调整跨度，则会得到不良效果。这就是为什么我添加了另一个自定义属性并更改它。

最不幸的是，无论您选择哪种解决方案，如果您想要完全动态的解决方案，则需要手动更改第 n 个子选择器，或者通过 JavaScript 更改。 （你也可以使用SASS / SCSS，这显然也是一个好方法）

新添加的属性如下所示：

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

对于项目，您可以更改属性 --row-items
的值

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

现在直接在 .item 类上计算跨列，而不是选择 x。

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

作为参考，列和行自定义属性声明如下：

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

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

---

结论

我希望这可以帮助您了解如何使这种网格发挥作用。
如果您发现任何错误，或者对我有任何反馈，请在这篇文章中发表评论！

谢谢，祝您周末愉快，
库莱卡里

---

原创笔

---

具有 items 属性的 Pen

以上是具有交替行的简单网格的详细内容。更多信息请关注PHP中文网其他相关文章！