feat: columns

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>