css网格_带有CSS变量的相对网格项

我最近在帮助我的同事开始使用CSS网格布局，他问我是否有一种相对于彼此偏移网格项的方法，例如“如果第1列在x行结束，使第2列在x + n行开始”。 Grid本身并没有完全做到这一点的方法，在这种情况下，您需要显式放置项目。 但是我想到这可能是CSS变量或自定义属性的用例。

以前，我已经比较了CSS变量和Sass（或其他预处理器）变量之间的差异，类似于const和let在JavaScript中的差异。 CSS变量更像let因为它们是动态的，而不是静态的。 但是这种类比有点误导，因为有一个关键的区别：使用CSS变量，无法访问超出其范围的局部范围的变量。

一个例子：

.my-component {
	--bgColor: red;
}

/* This will not workundefined the variable is undefined */
.another-component {
	background-color: var(--bgColor);
}

因此，如果我们要相对于彼此放置在网格布局上的项目，则需要在父网格容器上定义这些变量，以便它们被子代继承。

.grid {
	--start1: 1;
	--end1: 4;
	--start2: calc(var(--end1) + 2);
}

.grid__item:first-child {
	grid-column: var(--start1) / var(--end1);
}

.grid__item:nth-child(2) {
	grid-column: var(--start2) / 12;
}

第二个.grid__item行将始终是第一个项目的结束行之后的两条网格线。 如果我们要更改grid组件的第二个变量，而要更改第一个.grid__item的位置，则第二个网格子对象的开始将相应地更新：

.grid—2 {
	--end1: 6:
}

以下是该概念的演示：

演示地址

需要注意的是，我们需要注意第一个网格项的位置不会导致第二个网格项的位置超出grid-template-columns属性中指定的总列数。 在这种情况下，我将对项目的结束行进行硬编码，因此这不会成为问题。 但是第一个项目仍然可以将其起始行推到我们的列数之上，因此需要提防这一点。 使用if语句，变量可能超级强大，但是到目前为止，我们在CSS中还没有这种功能！

我们也不必只坚持两个项目-从理论上讲，我们可以有很多相对于彼此放置的项目。 这是一个稍微复杂的演示，我们在列和行轴上相对彼此放置项目：

演示地址

使用Sass变量可能会做类似的事情，但是CSS变量的优点是我们的代码可重用同一组件的不同变体。 如果我们有多个变体，那么我们只需要更新一些变量，而无需再次写出网格声明。

即使我还没有在任何实际的用例上工作过，但这里肯定存在一些可能性，在这种情况下，这种方法比手动将项目放置在不同的网格线上更为可取。 我很想知道这种摆放方法是否适用于任何人，所以如果您尝试一下，请告诉我！

翻译自: https://css-irl.info/relative-grid-tracks/