feat: columns (#1008)

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

## 🧰 Changes
- Implement `Columns` component

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/eba81b86-f6c4-4791-ae91-ae0b757083d1">


<img width="500" alt="image"
src="https://github.com/user-attachments/assets/b6b12f72-f490-4bd0-9624-7a3fc4a2d74d">


## 🧬 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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import './style.scss';
+
+export const Column = ({ children }) => {
+  return (
+    <div className="Column">{children}</div>
+  )
+}
+
+const Columns = ({ children, columns = 2, layout = 'auto'}) => {
+  layout = layout === 'fixed' ? '1fr' : 'auto';
+  return (
+    <div className="Columns" style={{ gridTemplateColumns: `repeat(${columns}, ${layout})` }}>
+      {children}
+    </div>
+  );
+};
+
+export default Columns;

components/Columns/style.scss

@@ -0,0 +1,4 @@
+.Columns {
+  display: grid;
+  gap: var(--md, 20px);
+}

components/index.ts

@@ -4,6 +4,7 @@ export { default as Callout } from './Callout';
 export { default as Cards, Card } from './Cards';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
+export { default as Columns, Column } from './Columns';
 export { default as Embed } from './Embed';
 export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';

docs/built-in-components.mdx

@@ -35,3 +35,19 @@
   <Tab title="Second Tab">Here's content that's only inside the second Tab.</Tab>
   <Tab title="Third Tab">Here's content that's only inside the third Tab.</Tab>
 </Tabs>
+
+---
+
+### Columns
+
+<Columns columns={3} layout="auto">
+  <Column>
+    Neque porro quisquam est qui dolorem ipsum quia
+  </Column>
+  <Column>
+    *Lorem ipsum dolor sit amet, consectetur adipiscing elit*
+  </Column>
+  <Column>
+    > Ut enim ad minim veniam, quis nostrud ullamco
+  </Column>
+</Columns>