Как реализовать такую плитку на css или jquery?

Question

[WebforSelf]

Есть такая плитка


Как вывести точно такую же в цикле?

<?php
$straniczy_osnovnogo_menyu = get_field('straniczy_osnovnogo_menyu');
if( $straniczy_osnovnogo_menyu ): ?>
   <div class="grid">
    <?php foreach( $straniczy_osnovnogo_menyu as $post ): 
        setup_postdata($post); ?>
        <div class="grid-item osnova_menu_item">
		<?php if ( has_post_thumbnail($post->ID) ) {?>
		<img class="img-fluid" src="<?php echo get_the_post_thumbnail_url($post->ID, 'full');?>" alt="">
		  <?php } ?>
		
           <div class="osnova_menu_title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
        </div>
    <?php endforeach; ?>
    </div>
    <?php 
    wp_reset_postdata(); ?>
<?php endif; ?>

https://masonry.desandro.com/
пробовал masorny но оно ставит хаотично , а не так как по макету.
Что то с этими плитками ума не приложу как верстать, тем более изображения все квадратные исходные, нужно делать их изначально вертикальными?или задавать высоту ширину каждому?

Comments

[Вадим]

Набросок на CSS Grid

[Ankhena]

Как вывести точно такую же в цикле?

Например, через nth-child
Как реализовать такую сетку на грид? (в комментариях к вопросу)

Answer 1

[Юрий]

Для сетки display: grid
Для изображений object-fit: cover