feat: add responsive auto layout modes to Columns

[brandonmcconnell]

Note

I also considered switching the original card component to use container queries for better responsiveness, and it may still be worth doing this in the future, but to keep the footprint of this PR minimal, I excluded that change.

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

Medium Risk
Changes Columns layout behavior by introducing a new layout prop and switching how grid columns are computed (class-based vs inline gridTemplateColumns), which could affect rendering in existing consumers.

Overview
Adds a new layout prop to Columns to support responsive auto-grid modes (fill/fit) in addition to the existing fixed-column behavior (none). When auto modes are enabled, Columns now computes gridTemplateColumns dynamically using a configurable CSS variable (--col-min-w, default 200px); otherwise it uses centralized breakpoint/container-query class mappings.

Updates Storybook to expose the new control, wrap stories in a container-query-enabled decorator, and add a LayoutModes comparison story demonstrating none vs fit vs fill.

^{Written by Cursor Bugbot for commit 606297e. 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.}