Grid Block Is Not Responsive

[EldarAgalarov]

Description

Grid Block is not responsive on narrow screens.
The grid should transform into a single-column layout, but continue to look the same as on wide screens.

Step-by-step reproduction instructions

1. Set grid item position to manual;
2. Set number of columns, for example 2-3;
3. Put any visible blocks to the Grid;
4. Make the screen width as narrow as possible;
5. Make sure the grid does not transform into a single-column mode.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[sarthaknagoshe2002]

@EldarAgalarov can you please attach some images or a screencast if possible?

[yogeshbhutkar]

Screen.Recording.2024-11-19.at.10.10.01.AM.mov

Hi, @EldarAgalarov, thanks for raising the issue. I've reviewed the issue description and here are my thoughts.

The Grid Layout is responsive, however, in your implementation, you are overriding the Grid Position to Manual, where you need to specify the number of columns and those many columns would then be displayed regardless of the viewport width.

However, if you want the Grid to be responsive or stacked in a single column on mobile devices, you can proceed with the Auto Position option and specify the minimum column width. It will stack up the Grid as demonstrated in the video attached earlier.

[EldarAgalarov]

@yogeshbhutkar Yes, I know about auto mode. But there are another block that utilizing grid layout: Query Loop. This block transforms into single-column layout on narrow screens, even if the number of columns is specified. Overall we have two grid-based blocks that works inconsistently. Intuitively, they should have the same settings and responsiveness.

[rinkalpagdar]

Overall we have two grid-based blocks that work inconsistently. Intuitively, they should have the same settings and responsiveness.

@EldarAgalarov Can you please provide a demo video to understand it in a better way? I think you talking about the case mentioned below. In which the grid turns into stack at 600px.

[EldarAgalarov]

@rinkalpagdar Hello. The Query Loop block with grid layout works as it should: even if 2 column layout is manually set the Query Loop block anyway transforms to 1-column layout on narrow screens.

The Grid Layout block must implement the same logic. Now this block keeps number of columns that was manually set and doesn't transforms into single-column layout on narrow screens like Query Loop. I think the Grid Layout block must implement the same responsiveness logic as Query Loop block to maintain consistency.

[vegetable-bits]

I've been a little shocked how it is implemented. For now I have to overwrite it with CSS.
The core/group should use a more modern approch like described here: https://css-tricks.com/books/greatest-css-tricks/flexible-grids/

Drupal seems to do it similar, that way you can have responsive columns without media query.

[tellthemachines]

Closing this issue as it has been fixed in #73662: now, adding a minimum column width to the grid config will allow it to be responsive (and allow more fine-tuning than the Query block styles would). Thanks for reporting it!