fix: update columns (#1030)

[![PR App][icn]][demo] | Fix RM-11030
:-------------------:|:----------:

## 🧰 Changes
- Remove columns prop (calculate number of child elements instead)
- Add media query for responsiveness

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

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>
   );

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;
+  }
 }

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>