Css grid-row для повторяющихся рядов - PullRequest
Новая
       6

Css grid-row для повторяющихся рядов

0 голосов
/ 02 ноября 2018

Я хочу сделать галерею с использованием компоновки сетки 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 на каждом шаге я показываю одно изображение. 

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