具有交替行的简单网格-css教程-PHP中文网

具有交替行的简单网格

Linda Hamilton

发布： 2024-12-08 16:23:10

原创

737 人浏览过

Simple Grid With Alternating Rows

介绍

这是一个简单的演示，展示了如何拥有一些具有交替行的简单网格。在此示例中，一行包含三个项目，另一行包含两个项目。
这是一个 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;
}

登录后复制