remove columns prop

readmeio · Nov 8, 2024 · 1f56f25 · 1f56f25
1 parent d0564ea
commit 1f56f25
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -40,7 +40,7 @@
 
 ### Columns
 
-<Columns columns={3} layout="auto">
+<Columns layout="auto">
   <Column>
     Neque porro quisquam est qui dolorem ipsum quia
   </Column>