Description

If you set a Grid Layout using Auto type, set to say 10rem, there is a media query that overrides for anything 600px and below:

@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: 1fr;
  }
}

This is counter-intuitive, because the default grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)) handles the responsiveness by itself. Having the 1fr override makes columns way too wide.

Side issue: there should be UI to toggle between auto-fill and auto-fit.

Step-by-step reproduction instructions

Insert a Query block with Post Template said to Grid layout. Set Type to Auto. Then view site at viewport of less than or equal to 600px, see grid layout is just a single column.

Expected behaviour

The grid would remain the same, obviously less columns would appear, but the repeat() handles that very nicely already.

Actual behaviour

Everything is a single column.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 6.6.1
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated?
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device:
• Operating system:
• WordPress app version: