From 1f56f25c45c0575b8c76b49762a37bb9c6457d53 Mon Sep 17 00:00:00 2001
From: Trisha Le <trishaprilee@gmail.com>
Date: Fri, 8 Nov 2024 15:57:08 -0800
Subject: [PATCH] remove columns prop

---
 components/Columns/index.tsx  | 6 ++++--
 components/Columns/style.scss | 6 ++++++
 docs/built-in-components.mdx  | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/Columns/index.tsx b/components/Columns/index.tsx
index 9e13fdb26..8c8e6fe41 100644
--- a/components/Columns/index.tsx
+++ b/components/Columns/index.tsx
@@ -8,10 +8,12 @@ export const Column = ({ children }) => {
   )
 }
 
-const Columns = ({ children, columns = 2, layout = 'auto'}) => {
+const Columns = ({ children, layout = 'auto'}) => {
   layout = layout === 'fixed' ? '1fr' : 'auto';
+  const columnsCount = React.Children.count(children);
+
   return (
-    <div className="Columns" style={{ gridTemplateColumns: `repeat(${columns}, ${layout})` }}>
+    <div className="Columns" style={{ gridTemplateColumns: `repeat(${columnsCount}, ${layout})` }}>
       {children}
     </div>
   );
diff --git a/components/Columns/style.scss b/components/Columns/style.scss
index 64e6702e7..42612e64e 100644
--- a/components/Columns/style.scss
+++ b/components/Columns/style.scss
@@ -1,4 +1,10 @@
+$iphone-plus: 414px;
+
 .Columns {
   display: grid;
   gap: var(--md, 20px);
+
+  @media (max-width: $iphone-plus) {
+    grid-template-columns: 1fr !important;
+  }
 }
diff --git a/docs/built-in-components.mdx b/docs/built-in-components.mdx
index 3c81f05b7..ada17a5ca 100644
--- a/docs/built-in-components.mdx
+++ b/docs/built-in-components.mdx
@@ -40,7 +40,7 @@
 
 ### Columns
 
-<Columns columns={3} layout="auto">
+<Columns layout="auto">
   <Column>
     Neque porro quisquam est qui dolorem ipsum quia
   </Column>