css - 第 n 个子网格选择

Question

我正在寻找像下面的支持图像一样构建以下网格结构，以便它以相同的模式继续，但我不确定我应该使用什么第 n 个子规则，我已经尝试了很多到没有利用。

我当前的代码是

.category:nth-child(5n+1)
{
  width:48%;
  max-width: 48%;
}

但不幸的是，这在我想要的效果之间留下了 4 行。

标签： csscss-selectors

Answer 1

我假设这些项目是浮动的，并且您希望能够添加无限多个并保持相同的模式。

在这种情况下，我将使用两个选择器，因为您需要从每六个块中选择第一个和最后一个项目。

.category:nth-child(6n), .category:nth-child(6n-5) {
    max-width: 48%;
    width: 48%;
}