Two 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 {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5712,"sizeSlug":"full","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/mihai-halmi-nistor-bsvhy0nligc-unsplash-1.jpg" alt="" class="wp-image-5712"/></figure>
<!-- /wp:image -->

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

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5713,"sizeSlug":"large","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-large size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/calvin-yin-ulgrggvp_pw-unsplash.jpg?w=1024" alt="" class="wp-image-5713"/></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 --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

[onuro]

LGTM

[alaczek]

I wonder if the gap between the images could be a bit bigger? I'm also wondering why are there two group blocks needed here?

[onuro]

Updated:

• Removed the groups which seemed like @iamtakashi using them for adding block spacing between text and image, which is also available in the columns
• Increased horizontal column spacing

<!-- 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 {"verticalAlignment":"center","style":{"spacing":{"blockGap":"60px"}}} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"id":5712,"sizeSlug":"full","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/mihai-halmi-nistor-bsvhy0nligc-unsplash-1.jpg" alt="" class="wp-image-5712"/></figure>
<!-- /wp:image -->

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

<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"id":5713,"sizeSlug":"large","linkDestination":"custom","className":"size-full"} -->
<figure class="wp-block-image size-large size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/07/calvin-yin-ulgrggvp_pw-unsplash.jpg?w=1024" alt="" class="wp-image-5713"/></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:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

[alaczek]

Published!