Styling every 3rd and 4th item

Question

I have an array of items that should be displayed as cards. Every 3rd and 4th item should be wider than the others (pattern: narrow - narrow - wide - wide - narrow - narrow - wide - wide... and so on). What I tried so far:

.card {
    &:nth-child(1n) {width: 33%;}
    &:nth-child(2n) {width: 33%;}
    &:nth-child(3n) {width: 66%;}
    &:nth-child(4n) {width: 66%;}
}

Of course this only works for the first 4 items. I want to be able to use this for an infinite amount of items though. I could figure it out neither with &:nth-child(3n) and similar stuff.

Is it possible to solve this with a css grid?

Answer 1

To select every 3rd and 4th item you can use 4n + 3 and 4n + 4 in nth-child selector.

div > div {
  width: 50px;
  display: inline-block;
  height: 50px;
  border: 1px solid black;
}

div > div:nth-child(4n + 3), 
div > div:nth-child(4n + 4){
  width: 100px;
}

<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>