Four Images in Grid

[iamtakashi]

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"3.5vw","bottom":"3.5vw"},"margin":{"top":"0px","bottom":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:3.5vw;padding-bottom:3.5vw"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} -->
<div class="wp-block-group alignwide has-link-color"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33%"} -->
<div class="wp-block-column" style="flex-basis:33%"><!-- wp:group {"style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5638,"sizeSlug":"full","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/martin-katler-qm4xm0pdhfs-unsplash.jpg" alt="" class="wp-image-5638"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.4","fontSize":"0.875rem"}}} -->
<p style="font-size:0.875rem;line-height:1.4">Trnava, Slovakia</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"67%"} -->
<div class="wp-block-column" style="flex-basis:67%"><!-- wp:group {"style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5639,"sizeSlug":"full","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/amir-hosseini-3cl6impbd_8-unsplash.jpg" alt="" class="wp-image-5639"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.4","fontSize":"0.875rem"}}} -->
<p style="font-size:0.875rem;line-height:1.4">Tehran, Iran</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"3.5vw"} -->
<div style="height:3.5vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"75%"} -->
<div class="wp-block-column" style="flex-basis:75%"><!-- wp:group {"style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5641,"sizeSlug":"full","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/calvin-yin-zyjacrs39eq-unsplash.jpg" alt="" class="wp-image-5641"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.4","fontSize":"0.875rem"}}} -->
<p style="font-size:0.875rem;line-height:1.4">Münster, Germany</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:group {"style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5642,"sizeSlug":"full","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/jimmy-chang-pj5zm1i0gnu-unsplash.jpg" alt="" class="wp-image-5642"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.4","fontSize":"0.875rem"}}} -->
<p style="font-size:0.875rem;line-height:1.4">Beijing, China</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

https://dotcompatterns.wordpress.com/?p=5637&preview=true

[onuro]

This is a nice minimal pattern that could also be used for multiple verticals and themes.

[alaczek]

Loving it! LGTM!

[alaczek]

Published.