Creating and adjusting grids & grid content

I’m trying to create 3 equal columns of 3 equal rows to display 6 of my books. I want to put text and a picture in each of the boxes and have it all look uniform. I used the grid option. I couldn’t find any step-by-step instruction in support or documentation, so I asked Grok.

I’m stuck on step #4 below. I’m not able to resize the sample pictures I uploaded. How do I do the following. Or is this incorrect? >>>>>>>>”Add Image block (GenerateBlocks Image – better than core)
Upload / choose image. In Sizing → set width = 100% ” <<<<<<<<

Also, are the #5-7 instructions below correct?

Thanks!

Grok instructions:

Here’s the cleanest and most reliable way in 2025–2026 to create a perfectly uniform 3-column / 2-row grid (6 equal boxes/cards) using GenerateBlocks + GeneratePress, with image + text in each cell that looks consistent across all boxes.
Recommended Method: Use the Grid Block (Flexbox-based – easiest for equal heights)
Step-by-step instructions:

1. Add the Grid Block
Edit your page/post with Gutenberg
Click + → search for Grid (GenerateBlocks)
Insert it
In the Layout → Columns panel → choose the 3-column preset (or manually type 1fr 1fr 1fr)
→ This automatically creates one row with 3 Containers (the grid items/columns)

2. Create the second row (duplicate the first row)
Click the + button that appears between grid items (or select one Container → click the duplicate icon in the toolbar)
Duplicate until you have 6 Containers total (2 rows × 3 columns)
Alternative quick way: Select all 3 containers (multi-select), duplicate them → they will automatically create a new row

3. Make all boxes equal height (very important!)
Select the parent Grid block
Go to Styles → Layout
Set Vertical Alignment = Default (or Stretch – both usually work)

Then select all 6 child Container blocks at once (easiest way: click first one, hold Shift, click last one)
In the Sizing panel → set Height = 100%
This is the key setting that makes all cards stretch to the same height (based on the tallest one).

4. Structure each card (Container) the same way – do this on the first one, then duplicate
Inside each Container:
Add Image block (GenerateBlocks Image – better than core)
Upload / choose image
In Sizing → set width = 100%
Aspect ratio options (recommended choices):
Use object-fit: cover + fixed aspect (e.g. 4:3, 3:2, 1:1)
Or set a fixed height (e.g. 220px / 280px) → most uniform look

Below the image add Headline block (for title)
Below that add Text block (or another Headline + Text combo) for description
(Optional) Add Button block at the bottom

5. Make content inside cards push the button down (perfect alignment trick)
Select each Container again (all 6)
Go to Layout →
Display = Flex
Direction = Column
Align Items = Stretch or Normal
Justify Content = Space Between (very useful if you have a button)

This pushes the last element (button/text) to the bottom → super clean look

6. Make everything look uniform & beautiful
On the parent Grid block:
Horizontal Gap → 30–40px (or more)
Vertical Gap → 30–50px
Max Width → e.g. 1200px (or container width)
On each child Container (bulk select them):
Background → same color for all (light gray / white / brand color)
Padding → same on all sides (e.g. 30px)
Border → same border-radius (12–20px looks modern)
Box Shadow → subtle shadow (optional but looks premium)

7. Responsive check & adjustments
Switch to Tablet & Mobile view
On Grid block → change columns:
Tablet → 2 columns (1fr 1fr)
Mobile → 1 column (1fr)

Adjust vertical gap on smaller screens if needed