feat: add responsive auto layout modes to Columns

[brandonmcconnell]

Summary

Introduces new responsive auto layout modes (fill and fit) for the Columns component, enhancing its adaptability to varying container widths. The new layout prop allows developers to specify how columns should behave:

• static (default): Columns maintain fixed counts at different breakpoints using predefined classes.
• fill: Dynamically adds as many columns as possible to fill the available space, ensuring items don't drop below a minimum width.
• fit: Similar to fill, but it stretches items to fit the remaining space if there aren't enough items to fill a full row.

This change utilizes CSS grid-template-columns with repeat(auto-fill/auto-fit, minmax(...)) for intelligent, flexible layouts, and includes new Storybook examples to demonstrate these modes.

Test Plan

• Verify new AutoFit and AutoFill stories in Storybook correctly display the responsive column behavior.
• Ensure the default static layout and existing stories continue to function as expected.
• Check responsiveness by resizing the Storybook canvas or browser window for all layout modes.

CleanShot.2026-03-17.at.19.20.24.mp4

---

Note

Low Risk
Low risk: changes are isolated to the Columns component’s grid styling and are opt-in via a new layout prop, with static preserved as the default.

Overview
Adds a new layout prop to Columns to support responsive CSS grid auto-layout modes (fill/fit) in addition to the existing fixed-column (static) behavior.

Refactors column defaults and class mappings into constants.ts, and applies gridTemplateColumns inline when an auto mode is selected (with a configurable --col-min-w fallback). Storybook controls and new AutoFit/AutoFill stories were added to demonstrate the new layouts.

^{Written by Cursor Bugbot for commit 1a1554f. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}