Columns Block: Multiple rows

[dashkevych]

Description

The Columns block is designed to display items in a single row. We can create additional row by adding additional Columns block.

For example, to create a three columns layout with two rows, we can use two Columns block with a three columns layout:

However, on some cases, we can see a broken layout due to default styles for the Columns block, which changes the width of a column to 50%:

Are there any solutions for this issue?

Step-by-step reproduction instructions

Add two Columns blocks with a three columns layout to the content area.

Here is a screenshot from the Block editor:

• WordPress: 5.8.1
• Theme: Twenty Twenty-One (Version: 1.4)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

The Gutenberg plugin is inactive. I am using functionality which comes from a WordPress core, without any plugins.

Here is the same outcome with an active Gutenberg plugin (v11.8.0) and the 'Stack on mobile' option toggled on:

The_Columns_block.mp4

[Sandstromer]

I don't think this is considered a broken layout when the 'Stack on mobile' option is toggled on.

At screen width of 599px and less the columns go to 100% wide, and at screen widths of 600px to 781px the columns go to 50% wide as shown in your screenshot.

Edit: sorry just realised that I assumed you have the 'Stack on mobile' option toggled on.

I tested with this off and am unable to recreate the issue.

You didn't mention whether the stack on mobile is on or off.

[annezazu]

I can replicate this with the stack on mobile option on using Gutenberg 11.9 with WordPress 5.8.2. As far as I know, this is by design to accommodate different screen sizes:

columns.mov

I'm not quite sure if this is an issue as a result rather than intended. I'm going to close this out as a result :)

[dashkevych]

I'm not quite sure if this is an issue as a result rather than intended.

This layout works great if we have only three items in a row.

However, if we have multiple rows -- let's say three rows -- then it can cause confusion for the user when viewing a grid in smaller views. Since there are extra spaces in smaller views, the user might think that the grid is broken.

For example, the user has created Services section on the page where a site visitor can find nine services provided by the company.

Default view (it looks like one section)

Smaller view (it looks like three separate sections)

Expected view in smaller screens

Hope there will be a solution in the future WordPress releases.

[annezazu]

Thanks for the additional context. @kjellr curious what your thoughts might be considering how much work you're doing with block themes and patterns that might be impacted by this kind of issue?

[Sandstromer]

@dashkevych, sadly the columns block does not support a grid layout. AFAIK it was never intended to, and I'm not sure it ever will.

There has been some discussion about grid layouts, a recent(ish) one I came across is in relation to the group flex layout and the possibility of also including grid: #33687

[nekohayo]

For anyone like me who has been wondering where this went, it seems (?) the follow-up issues would be:

• More vertical alignment options for the Columns block  #16190
• Columns block: Background color does not stretch full-height with vertical alignment set #32907
  • Columns: Update columns to allow full height stretch when vertically aligned #32909