Stuck at Grid Attack level 47 [closed]

I got stuck at coding fantasy: grid attack game level 47, it doesn't give any hints and i cant skip levels. Is there anyone who can help with the solution?

The starting code is as such:

<div id="field"><div class="greenLand"></div><div class="redLand"></div><div class="greenLand"></div><div class="redLand"></div><div class="greenLand"></div><div class="redLand"></div></div>

#field {  display: grid;  grid-template: repeat(4, 1fr) / repeat(4, 1fr);  gap: 20px;  /* type here */}#field div:nth-child(3n) {  grid-column: span 3;}

Starter code results in such a layout:

Starter layout

The former level was solved using grid-auto-flow property, maybe that can help.

I tried grid-auto-flow: column but i guess there is something else needed too.

Our code should fill squares with dashed borders, ensuring that the fill color matches the border color.