Grid block: add "auto-fit" option

[bradhogan]

Description

Running into an issue when using the grid block and seems this would be a quick fix. Rather than using auto-fill in the grid-templates-column if we switch to auto-fit, seems to work better to help those columns fill the space.

Step-by-step reproduction instructions

1. Add grid block (need grid experiment checked in gutenberg settings)
2. Add three groups within the grid (so there are three columns)
3. Select the grid block - set to "full width" then also update the width for the interior groups to "200px"
4. View on desktop
5. Notice the empty whitespace (does not fill entire section)
6. If you change repeat(auto-fill, minmax(min(200px, 100%), 1fr)) to repeat(auto-fit, minmax(min(200px, 100%), 1fr)) in the console, you'll see it fixes the issue.

Screenshots, screen recording, code snippet

https://soapbox.wistia.com/videos/1IWnsyoL8e

Environment info

• wp 6.4.2
• gutenberg 17.2.3
• mac sonoma
• chrome

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

[jordesign]

Thanks for the report @bradhogan - I'm unclear what block you're referring to by the 'Grid' block as that doesn't sound like one of the Core Gutenberg blocks. Could you please tell me a little more?

[bradhogan]

@jordesign in the admin menu, go to Gutenberg > Experiments > check to turn the grid block on (it's part of the Group block)

[jordesign]

Ah - thanks - the experimental grid block. Thanks for confirming.

[tellthemachines]

Thanks for creating this issue! The use of auto-fill was deliberate, because a single item or two items in a grid shouldn't always stretch to fill their whole container. The intention is to make this behaviour configurable in the future, but to start with auto-fill was chosen as a default so that the width of contents never varies too much from the defined minimum width.

I'll leave this open and re-label it as an enhancement to add auto-fit as an option.

[germanfrelo]

Yes, please, implement the auto-fit option to the (now stable) Grid layout 🙏🏻.