feat: add responsive auto layout modes to Columns

packages/components/src/components/columns/columns.stories.tsx

@@ -12,6 +12,13 @@ const Box = ({ children }: { children?: React.ReactNode }) => (
 const meta: Meta<typeof Columns> = {
   title: "Components/Columns",
   component: Columns,
+  decorators: [
+    (Story) => (
+      <div style={{ containerType: "inline-size" }}>
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     layout: "padded",
   },
@@ -33,6 +40,10 @@ const meta: Meta<typeof Columns> = {
       control: "select",
       options: [...COL_OPTIONS],
     },
+    layout: {
+      control: "select",
+      options: ["static", "fill", "fit"],
+    },
     children: {
       table: { disable: true },
     },
@@ -60,6 +71,14 @@ export const FourColumns: Story = {
   args: { cols: 4 },
 };
 
+export const AutoFit: Story = {
+  args: { cols: 3, layout: "fit" },
+};
+
+export const AutoFill: Story = {
+  args: { cols: 3, layout: "fill" },
+};
+
 export const WithCustomClassName: Story = {
   args: {
     cols: 2,

packages/components/src/components/columns/columns.tsx

@@ -2,25 +2,39 @@ import type React from "react";
 import { Classes } from "@/constants/selectors";
 import { cn } from "@/utils/cn";
 import type { ColCount } from "./constants";
+import { AUTO_MODES, COL_CLASSES, DEFAULT_AUTO_MODE, DEFAULT_COLS, DEFAULT_MIN_COL_WIDTH } from "./constants";
 
 type ColumnsProps = {
   children: React.ReactNode;
   cols?: ColCount | `${ColCount}`;
+  layout?: "static" | "fill" | "fit";
   className?: string;
 };
 
-const Columns = ({ children, className, cols = 2 }: ColumnsProps) => {
+const Columns = ({
+  children,
+  className,
+  cols = DEFAULT_COLS,
+  layout = DEFAULT_AUTO_MODE,
+}: ColumnsProps) => {
+  const numCols = Number(cols) || DEFAULT_COLS;
+  const autoMode = AUTO_MODES[layout];
+  const minWidth = `var(--col-min-w, ${DEFAULT_MIN_COL_WIDTH})`;
+  const autoStyle = autoMode
+    ? {
+        gridTemplateColumns: `repeat(${autoMode},minmax(max(${minWidth},calc(100%/${numCols} - 1rem)),1fr))`,
+      }
+    : undefined;
+
   return (
     <div
       className={cn(
         Classes.Columns,
         "prose dark:prose-invert grid gap-4",
-        Number(cols) === 1 && "sm:grid-cols-1",
-        Number(cols) === 2 && "sm:grid-cols-2",
-        Number(cols) === 3 && "sm:grid-cols-3",
-        Number(cols) === 4 && "sm:grid-cols-4",
+        !autoMode && (COL_CLASSES[numCols] ?? ""),
         className
       )}
+      style={autoStyle}
     >
       {children}
     </div>

packages/components/src/components/columns/constants.ts

@@ -1,5 +1,30 @@
 const COL_OPTIONS = [1, 2, 3, 4] as const;
 type ColCount = (typeof COL_OPTIONS)[number];
 
-export { COL_OPTIONS };
+const DEFAULT_COLS = 2;
+const DEFAULT_MIN_COL_WIDTH = "200px";
+const DEFAULT_AUTO_MODE = "static";
+
+const COL_CLASSES: Record<number, string> = {
+  1: "@sm:grid-cols-1",
+  2: "@sm:grid-cols-2",
+  3: "@sm:grid-cols-3",
+  4: "@sm:grid-cols-4",
+};
+
+const AUTO_MODES = {
+  static: undefined,
+  fill: "auto-fill",
+  fit: "auto-fit",
+} as const;
+
+export {
+  COL_OPTIONS,
+  COL_CLASSES,
+  AUTO_MODES,
+  DEFAULT_COLS,
+  DEFAULT_MIN_COL_WIDTH,
+  DEFAULT_AUTO_MODE,
+};
+
 export type { ColCount };