feat: refactor Columns to support container query-based sizing

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

@@ -60,6 +60,24 @@ export const FourColumns: Story = {
   args: { cols: 4 },
 };
 
+/**
+ * When placed inside a container query context, columns respond to the
+ * container width instead of the viewport width.
+ *
+ * Resize the container below to see the columns respond to the container width.
+ */
+export const InsideContainer: StoryObj = {
+  render: () => (
+    <div className="@container resize overflow-hidden border p-8">
+      <Columns cols={3}>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </Columns>
+    </div>
+  ),
+};
+
 export const WithCustomClassName: Story = {
   args: {
     cols: 2,

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

@@ -2,25 +2,31 @@ import type React from "react";
 import { Classes } from "@/constants/selectors";
 import { cn } from "@/utils/cn";
 import type { ColCount } from "./constants";
+import { DEFAULT_COLS } from "./constants";
 
 type ColumnsProps = {
   children: React.ReactNode;
   cols?: ColCount | `${ColCount}`;
   className?: string;
 };
 
-const Columns = ({ children, className, cols = 2 }: ColumnsProps) => {
+const Columns = ({
+  children,
+  className,
+  cols = DEFAULT_COLS,
+}: ColumnsProps) => {
+  const numCols = Number(cols) || DEFAULT_COLS;
+
   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",
+        "prose dark:prose-invert grid max-w-none gap-4",
+        "sm:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
+        "@[0px]:grid-cols-1 @sm:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
         className
       )}
+      style={{ "--cols": numCols } as React.CSSProperties}
     >
       {children}
     </div>

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

@@ -1,5 +1,8 @@
 const COL_OPTIONS = [1, 2, 3, 4] as const;
 type ColCount = (typeof COL_OPTIONS)[number];
 
-export { COL_OPTIONS };
+const DEFAULT_COLS = 2;
+
+export { COL_OPTIONS, DEFAULT_COLS };
+
 export type { ColCount };