Grid of posts 2×3

[iamtakashi]

Category: Blog, Wireframe

Tag: Pattern, Layout

Screenshot:

Note: The pattern displays featured images if exist.

Markup:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"},"margin":{"top":"0px","bottom":"0px"}}},"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-bottom:7vw"><!-- wp:query {"queryId":16,"query":{"perPage":6,"pages":0,"offset":"0","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":2},"align":"wide"} -->
<div class="wp-block-query alignwide"><!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"blockGap":"1.5rem","padding":{"bottom":"1.5rem"}}}} -->
<div class="wp-block-group" style="padding-bottom:1.5rem"><!-- wp:post-featured-image {"isLink":true} /-->

<!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"typography":{"lineHeight":"1.3"}},"fontSize":"medium"} /-->

<!-- wp:post-excerpt {"moreText":"Read more","showMoreOnNewLine":false,"fontSize":"small"} /-->

<!-- wp:post-date {"fontSize":"small"} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

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

cc @alaczek @onuro

[onuro]

I understand this is for wireframe category but when testing with latest themes like TT3 the medium font size for the post titles seem to be making it hard to differentiate from the rest of the post content.

Also maybe the vertical spacings could need defining.

[iamtakashi]

@onuro, thanks for reviewing.

latest themes like TT3 the medium font size for the post titles seem to be making it hard to differentiate from the rest of the post content.

Are there more themes like TT3 that have a medium size that is almost the same as small size? TBH, I find TT3's font scale weird because it's very flat.

Also maybe the vertical spacings could need defining.

Wow... TT3's space unit is very "generous". The vertical spacing is defined in the pattern, but TT3 and Blank Canvas 3's unit is weirdly big. Look at the comparison with TT2 below.

TT2	TT3	BC3

I updated the spacing with absolute value instead so that the vertical spacing will always be the same regardless of the activated theme. Does it look better now?

I'm now worried about BC3 because it's based on TT3, which I find a little opinionated.

[onuro]

Are there more themes like TT3 that have a medium size that is almost the same as small size? TBH, I find TT3's font scale weird because it's very flat.

I totally agree, TT3 has room to be improved. I'm also going to revisit the font sizings on BC3 as well since TT3 fluid sizes feel a bit lacking contrast. Just awaiting the latest Gutenberg release that improves the fluid typography settings.

And yes looking nice now!

[iamtakashi]

Thanks! Published.