如何为CSS网格的每隔一行设置样式？ [英] How can I style every other row of a CSS Grid?

问题描述

我有无限数量的 div 元素（内容/网格项）。我希望它们在CSS网格的定义数量的列中进行布局。 CSS网格很容易将它们布置成这样。但是现在元素就位了，我想以某种方式在结果网格的每隔一行中设置< div> s的样式。

I have an indefinite amount of div elements (pieces of content / grid items). I want them to layout in a defined number of columns of CSS Grid. The CSS Grid lays them out like that easily. But now as the elements are in place I'd like to style the <div>s in every other row of the resultant grid in some way.

可以将表的每隔一行样式设置为较深的颜色。

Think of it as styling every other row of table to a darker color.

这个问题可以概括为问：

This question can be generalised to asking: can you style an arbitrary row/ column of a CSS Grid?

提议的情况：

<div class="content-grid">
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    ...

</div>

其CSS：

.content-grid {
    display: grid;
    grid-template-columns: 77px 77px 77px;
}

.content-grid__item {
    background-color: red;
}

理想世界中的首选解决方案：

And the preferable solution in of the ideal world:

// pseudocode
.content-grid:nth-row(odd) .content-grid__item {
    background-color: darkred;
}

推荐答案

您可以t ...

CSS网格行不是DOM元素，因此CSS不能选择。

You can't...

CSS Grid rows are not DOM elements and so cannot be selected by CSS.

这篇关于如何为CSS网格的每隔一行设置样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！