Rescue from the pitfalls of media.

Easy, Responsive Four-Box Row In WordPress

Create a row of four boxes that becomes two rows of two boxes on small screens using the core WordPress Row block.

Responsive Four-Box Row with Core WordPress Blocks

I love simple solutions. Here’s a very simple layout technique with core WordPress blocks: A horizontal row of four boxes on a big screen that becomes two rows of two boxes on a small screen. It’s best with an even number of boxes but probably works with odd numbers. I haven’t tested an odd number.

It’s very simple, but it’s a very useful option to have in your library of layout techniques.

The row has four boxes on big screens.

Four-Box Row in WordPress

On small screens, this layout becomes two rows of two-boxes.

On small screens, it becomes two rows of two-boxes each.

Block Nesting

In the block editor, nest Row blocks and Group blocks like this:

Row (container row)
   Row (inner row)
      Group
      Group
   Row (inner row)
      Group
      Group

The Group blocks contain your content. The boxes of content should have similar dimensions, but it probably works with some differences. Experiment a little to see if it works for your content. In the example above, they each contain a headline and an image. The headlines and images link to other pages.

Row Settings

For the container Row block, set Allow to wrap to multiple lines to ON.

For the inner Row blocks, set Allow to wrap to multiple lines to OFF.

To change this setting:

  1. Select the Row block in the Document Overview (the list of blocks on the left).
    • Toggle the Document Overview section on and off with Shift-Alt-O
  2. Find the setting in the Layout section in the Settings section on the right.
    • Toggle the Settings section on and off with Crtl-Shift-,
  3. Toggle the Allow to wrap to multiple lines setting.
Arrow points to WordPress block setting "Allow to wrap to multiple lines"

Conclusion

That’s how simple it is. It’s a very easy layout technique that’s very useful when the content has an even number of boxes.


If this helps, or you have a question or comment, please let us know. We don’t have comments on because… you know… spammers. But we’d love hear from you.

Send us a message if you have a comment.

More About Dave Loebig

About Pacesetter Media

Over 25 years’ experience in web design, media production, graphic design, business communications, printing, and promotion.

  • web design
  • WordPress
  • Wix, Weebly, Square and others
  • graphic design
  • photography and photo retouch
  • social media
  • printing
  • promotional items
  • signs and banners
  • direct mail