Query Loop: Add "Stack On Mobile" toggle for Grid View

[beafialho]

Not sure if this has been discussed somewhere else. If that's the case, please point me there.

In the Columns block, there's a toggle that allows you to choose whether columns stack on mobile or not:

In the Query Loop block, when we select Grid View for posts, they always show up stacked on mobile because this option doesn't exist. That prevents us from achieving designs like the one below on mobile.

Mockup	Gutenberg

I propose we add it to allow more flexibility to create layouts.

[DHWP]

How is this still normal priority? this makes the query block unusable on a site that wants to display well on mobile...

[Paldom]

Is this still on the roadmap after 2 years?
This would be a very useful feature.

[Paldom]

Meanwhile a workaround (Styles / ADDITIONAL CSS)

@media(max-width: 781px) {
  .wp-block-post-template.is-flex-container.is-flex-container > li {
    width: auto !important;
  }
}

[osirismqz]

Meanwhile a workaround (Styles / ADDITIONAL CSS)

@media(max-width: 781px) {
  .wp-block-post-template.is-flex-container.is-flex-container > li {
    width: auto !important;
  }
}

Does not work anymore.

This worked for me:

@media(max-width: 600px) {
  .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

Maybe we need to wait another year for this basic feature to be included.

[palmsout]

@osirismqz thank you so much for this -- I was struggling to understand why the old workaround had stopped working. +1 to the notion that this should be definable in the query loop block itself. The standard column block should also allow you to set custom breakpoints.

[chuckpearson]

This works great, thanks for providing. I'm also surprised there is no toggle for this block in WP.