网格布局模式的第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

单独定位并重复前七个项目中的每一个。

＆＃13;

＆＃13;

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%; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/fy5cbgnr/