feat: ColumnLayout Support even spacing for 4+ columns without setting min column width

pages/column-layout/min-width.permutations.page.tsx

@@ -21,6 +21,11 @@ const permutations = createPermutations<ColumnLayoutProps>([
     columns: [1, 2, 3, 4],
     minColumnWidth: [200],
   },
+  {
+    variant: ['default'],
+    columns: [5],
+    minColumnWidth: [undefined],
+  },
 ]);
 
 export default function ColumnLayoutPermutationsPage() {

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -9361,8 +9361,7 @@ Note: This is not supported when used with \`minColumnWidth\`.",
     },
     {
       "defaultValue": "1",
-      "description": "Specifies the number of columns in each grid row.
-When \`minColumnWidth\` is not set, only up to 4 columns are supported.",
+      "description": "Specifies the number of columns in each grid row.",
       "name": "columns",
       "optional": true,
       "type": "number",
@@ -9387,7 +9386,8 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "description": "Use together with \`columns\` to specify the desired minimum width for each column in pixels.
 
 The number of columns is determined by the value of this property, the available space,
-and the maximum number of columns as defined by the \`columns\` property.",
+and the maximum number of columns as defined by the \`columns\` property.
+When not specified and \`columns\` is 5 or more, defaults to 1 pixel to enable responsive column sizing.",
       "name": "minColumnWidth",
       "optional": true,
       "type": "number",

src/column-layout/__tests__/column-layout.test.tsx

@@ -27,6 +27,14 @@ describe('ColumnLayout component', () => {
         expect(wrapper.getElement()).toHaveClass(styles[`grid-columns-${columnCount}`]);
       });
     });
+
+    it('uses flexible layout for more than 4 columns without minColumnWidth', () => {
+      const renderResult = render(<ColumnLayout columns={5} />);
+      const wrapper = createWrapper(renderResult.container);
+      expect(wrapper.getElement()).not.toHaveClass(styles['grid-columns-5']);
+      const flexibleGrid = wrapper.find('[class*="css-grid"]');
+      expect(flexibleGrid).toBeTruthy();
+    });
   });
 
   describe('borders property', () => {

src/column-layout/__tests__/with-css.test.tsx

@@ -59,4 +59,22 @@ describe('ColumnLayout (with CSS grid) component', () => {
 
     expect(getGridColumns()).toBe('repeat(4, minmax(0, 1fr))');
   });
+
+  it('uses flexible layout for more than 4 columns without explicit minColumnWidth', () => {
+    const { wrapper, getGridColumns } = renderColumnLayout({
+      columns: 5,
+      children: (
+        <>
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
+        </>
+      ),
+    });
+
+    expect(wrapper.getElement().childElementCount).toBe(5);
+    expect(getGridColumns()).toBe('repeat(5, minmax(0, 1fr))');
+  });
 });

src/column-layout/interfaces.ts

@@ -9,7 +9,6 @@ import { ColumnLayoutBreakpoint } from './internal';
 export interface ColumnLayoutProps extends BaseComponentProps {
   /**
    * Specifies the number of columns in each grid row.
-   * When `minColumnWidth` is not set, only up to 4 columns are supported.
    */
   columns?: number;
 
@@ -35,6 +34,7 @@ export interface ColumnLayoutProps extends BaseComponentProps {
    *
    * The number of columns is determined by the value of this property, the available space,
    * and the maximum number of columns as defined by the `columns` property.
+   * When not specified and `columns` is 5 or more, defaults to 1 pixel to enable responsive column sizing.
    */
   minColumnWidth?: number;
 

src/column-layout/internal.tsx

@@ -32,12 +32,12 @@ export default function ColumnLayout({
 
   return (
     <div {...baseProps} className={clsx(baseProps.className, styles['column-layout'])} ref={__internalRootRef}>
-      {minColumnWidth ? (
+      {minColumnWidth || columns > 4 ? (
         <FlexibleColumnLayout
           columns={columns}
           borders={borders}
           variant={variant}
-          minColumnWidth={minColumnWidth}
+          minColumnWidth={minColumnWidth ?? 1}
           disableGutters={disableGutters}
           __tagOverride={__tagOverride}
         >