CSS网格行重复行

Question

我想使用CSS网格布局制作图库：

但是我不能为接下来的6个div元素重复网格行。我使用css nth:child()元素，但是无法正常工作。这是我的源代码：

.wa-works-page .content .works-gallery {
  display: grid;
  grid-gap: 10px;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+1) {
  grid-column: 1;
  grid-row: 2n+1;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+2) {
  grid-column: 2;
  grid-row: 2n+1;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+3) {
  grid-column: 3;
  grid-row: 2n+1 / span 2;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+4) {
  grid-column: 4;
  grid-row: 2n+1;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+5) {
  grid-column: 1 / span 2;
  grid-row: 2n;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n) {
  grid-column: 4;
  grid-row: 2n;
}

这是我的html。在wordpress acf repeter循环的每一步中，我都显示一张图像。

<div class="container content">
  <div class="works-gallery">
	<?php 
		if( have_rows('works_gallery') ):

		  while ( have_rows('works_gallery') ) : the_row();
	?>   
		<div class="work-image">
		 <img src="<?php echo get_sub_field('image')['url'];?>" alt="<?php echo get_sub_field('image')['alt'];?>">
		</div>
				   
<?php  endwhile;
					
endif;
?>
</div>
</div>