On some browsers, this has no effect on very small sizes such as 250px, since there is another limiting factor which prevents further shrinkage (e.g., word length). However this does work if the size is increased or the other limiting factors are removed.

Description

This simply replaces 250px with min(250px, 100%). This makes it so that if not enough space is avalible, the grid will simply take up all avalible space instead of forcing horizontal scroll.

Type of Change

• ✨ New snippet
• :tools: Improvement to an existing snippet
• 🐞 Bug fix
• 📖 Documentation update
• 🔧 Other (please describe):

Checklist

• I have tested my code and verified it works as expected.
• My code follows the style and contribution guidelines of this project.
• Comments are added where necessary for clarity.
• [N/A] Documentation has been updated (if applicable).
• [N/A] There are no new warnings or errors from my changes.

Related Issues

Closes #267

Additional Context

Screenshots (Optional)

(column width increased in demos for ease of demonstration)

Before:
image

After:
image

EDIT: Update images so the viewport is exactly the same width