html - 网格布局模式的第 n 个子选择器

Question

我正在尝试使用 css nth-child 解决不同的网格模式(如果可能的话，不用 JS)。

我正在尝试创建此模式以在页面下方重复:

目前我能达到的最好结果是前 3 个宽度为 33%，然后从那里开始的所有宽度为 25%

.service {
    width: 33%;
    &:nth-child(n+4),
    &:nth-child(n+5),
    &:nth-child(n+6),
    &:nth-child(n+7), {
        width: 25%;
    }
}

Answer 1

分别定位并重复前七项中的每一项。

article {
  display: flex;
  flex-wrap: wrap;
}
section {
  flex-grow: 1;
  height: 50px;  
  margin: 5px;
  background-color: black
}
section:nth-child(7n + 1) { flex-basis: 30%; }
section:nth-child(7n + 2) { flex-basis: 30%; }
section:nth-child(7n + 3) { flex-basis: 30%; }
section:nth-child(7n + 4) { flex-basis: 20%; }
section:nth-child(7n + 5) { flex-basis: 20%; }
section:nth-child(7n + 6) { flex-basis: 20%; }
section:nth-child(7n + 7) { flex-basis: 20%; }

<article>
  <section></section>
  <section></section>
  <section></section>  
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>  
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>  
  <section></section>
  <section></section>
  <section></section>  
  <section></section>
  <section></section>  
  <section></section>   
</article>

https://jsfiddle.net/fy5cbgnr/