How to achieve grids like this

Here you go.

<!-- wp:generateblocks/grid {"uniqueId":"8f4132b5","columns":3,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"6b4c59b2","isGrid":true,"gridId":"8f4132b5","gradientDirection":190,"gradientColorOne":"var(\u002d\u002dcontrast)","gradientColorTwo":"var(\u002d\u002dbase)","gradientSelector":"pseudo-element","bgImage":{"id":"","image":{"url":"https://thenerdy.com/wp-content/uploads/2024/03/[email protected]"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-end","position":"relative","overflowX":"hidden","overflowY":"hidden","sizing":{"width":"33.33%","widthMobile":"100%","height":"213px"},"spacing":{"paddingTop":"20px","paddingLeft":"20px","paddingRight":"20px","paddingBottom":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"c7f553bd","element":"p","blockVersion":3,"typography":{"fontSize":"16px"},"textColor":"var(\u002d\u002dbase-2)"} -->
<p class="gb-headline gb-headline-c7f553bd gb-headline-text"><strong>Everything coming to Tubi September 2024</strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"861c5fe3","isGrid":true,"gridId":"8f4132b5","bgImage":{"id":"","image":{"url":"https://thenerdy.com/wp-content/uploads/2020/03/[email protected]"}},"isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-end","sizing":{"width":"33.33%","widthMobile":"100%","height":"213px"},"spacing":{"paddingTop":"20px","paddingLeft":"20px","paddingRight":"20px","paddingBottom":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"6f3ee10d","element":"p","blockVersion":3,"typography":{"fontSize":"16px"},"textColor":"var(\u002d\u002dbase-2)"} -->
<p class="gb-headline gb-headline-6f3ee10d gb-headline-text"><strong>Streaming TV racks up huge numbers in July</strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"4eb5a07c","isGrid":true,"gridId":"8f4132b5","gradientDirection":90,"gradientColorOne":"rgba(255, 255, 255, 0.1)","gradientColorTwo":"rgba(0, 0, 0, 0.30)","bgImage":{"id":"","image":{"url":"https://thenerdy.com/wp-content/uploads/2024/02/[email protected]"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-end","position":"relative","overflowX":"hidden","overflowY":"hidden","sizing":{"width":"33.33%","widthMobile":"100%","height":"213px"},"spacing":{"paddingTop":"20px","paddingLeft":"20px","paddingRight":"20px","paddingBottom":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"ca439291","element":"p","blockVersion":3,"typography":{"fontSize":"16px"},"textColor":"var(\u002d\u002dbase-3)"} -->
<p class="gb-headline gb-headline-ca439291 gb-headline-text"><strong>Deadpool & Wolverine Final Trailer reveals a cameo</strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

Hi there,

1. In order to do this, you would have to hook the blocks in above the regular site content/below the header. For this, you would create a new Block Element (https://docs.generatepress.com/article/block-element-overview/) and set the Hook to generate_after_header. Then set the Display Rules to wherever you want this to display (homepage only, entire site, etc…).
2. What kind of content are you wanting to add? The block editor allows you to click inside each Container and add content as you need, or are you wanting to dynamically pull in content (from blog posts, for example)?
3. You can use the Container link option if you have GenerateBlocks Pro: https://docs.generateblocks.com/article/container-links/

Let us know 🙂

1. Add a new blank Query Loop block.

2. Copy the single column container from the previous grid and paste it inside the new Query Loop block.

3. In the Query Loop block settings, set Posts per Page to 3.

4. Add a Query Parameter by selecting Taxonomies > Categories, and input the name of the post category you want to display.

5. Click on the column container, and under the Dynamic Data block settings, enable Dynamic Data.

6. Set Data Source to Current Post and Background Image Source to Featured Image.

7. Select the Headline block, enable Dynamic Data and set Data Source to Current Post and Content Source to Title.

We can work on the hover effect CSS once the above setup is complete.