diff --git a/docs/docs/styles/grid-column/eleven-column.mdx b/docs/docs/styles/grid-column/eleven-column.mdx
new file mode 100644
index 0000000..6a76a0c
--- /dev/null
+++ b/docs/docs/styles/grid-column/eleven-column.mdx
@@ -0,0 +1,126 @@
+---
+title: Grid columns - eleven column
+---
+
+This provides styles for an eleven-column grid.
+
+The following sizes are available:
+
+- col-1-11
+- col-2-11
+- col-3-11
+- col-4-11
+- col-5-11
+- col-6-11
+- col-7-11
+- col-8-11
+- col-9-11
+- col-10-11
+- col-11-11
+
+Each column size has a class to go with each of the [media query viewport sizes](/styles/media#viewport-media-queries). For example:
+
+```css
+col-1-11-3xs
+col-1-11-2xs
+col-1-11-xs
+col-1-11-sm
+col-1-11-md
+col-1-11-lg
+col-1-11-xl
+col-1-11-2xl
+col-1-11-3xl
+col-1-11-4xl
+col-1-11-5xl
+```
+
+## How to import into your CSS
+
+Import this into your CSS with:
+
+```css
+@import 'cacao-css/dist/grid-column/col-11.css';
+```
+
+Imports are available for all [media query viewport sizes](/styles/media#viewport-media-queries).
+
+```css
+@import 'cacao-css/dist/grid-column/3xs/col-11.css';
+@import 'cacao-css/dist/grid-column/2xs/col-11.css';
+@import 'cacao-css/dist/grid-column/xs/col-11.css';
+@import 'cacao-css/dist/grid-column/sm/col-11.css';
+@import 'cacao-css/dist/grid-column/md/col-11.css';
+@import 'cacao-css/dist/grid-column/lg/col-11.css';
+@import 'cacao-css/dist/grid-column/xl/col-11.css';
+@import 'cacao-css/dist/grid-column/2xl/col-11.css';
+@import 'cacao-css/dist/grid-column/3xl/col-11.css';
+@import 'cacao-css/dist/grid-column/4xl/col-11.css';
+@import 'cacao-css/dist/grid-column/5xl/col-11.css';
+```
+
+See [Import Cacao CSS](/import) for more information.
+
+## Source CSS
+
+
+import CodeBlock from '@theme/CodeBlock';
+import ImportsSource from '!!raw-loader!../../../../dist/grid-column/col-11.css';
+import ImportsSource3xs from '!!raw-loader!../../../../dist/grid-column/3xs/col-11.css';
+import ImportsSource2xs from '!!raw-loader!../../../../dist/grid-column/2xs/col-11.css';
+import ImportsSourceXs from '!!raw-loader!../../../../dist/grid-column/xs/col-11.css';
+import ImportsSourceSm from '!!raw-loader!../../../../dist/grid-column/sm/col-11.css';
+import ImportsSourceMd from '!!raw-loader!../../../../dist/grid-column/md/col-11.css';
+import ImportsSourceLg from '!!raw-loader!../../../../dist/grid-column/lg/col-11.css';
+import ImportsSourceXl from '!!raw-loader!../../../../dist/grid-column/xl/col-11.css';
+import ImportsSource2xl from '!!raw-loader!../../../../dist/grid-column/2xl/col-11.css';
+import ImportsSource3xl from '!!raw-loader!../../../../dist/grid-column/3xl/col-11.css';
+import ImportsSource4xl from '!!raw-loader!../../../../dist/grid-column/4xl/col-11.css';
+import ImportsSource5xl from '!!raw-loader!../../../../dist/grid-column/5xl/col-11.css';
+
+### Default styles
+
+{ImportsSource}
+
+### 3xs styles
+
+{ImportsSource3xs}
+
+### 2xs styles
+
+{ImportsSource2xs}
+
+### xs styles
+
+{ImportsSourceXs}
+
+### sm styles
+
+{ImportsSourceSm}
+
+### md styles
+
+{ImportsSourceMd}
+
+### lg styles
+
+{ImportsSourceLg}
+
+### xl styles
+
+{ImportsSourceXl}
+
+### 2xl styles
+
+{ImportsSource2xl}
+
+### 3xl styles
+
+{ImportsSource3xl}
+
+### 4xl styles
+
+{ImportsSource4xl}
+
+### 5xl styles
+
+{ImportsSource5xl}
diff --git a/docs/docs/styles/grid-column/twelve-column.mdx b/docs/docs/styles/grid-column/twelve-column.mdx
new file mode 100644
index 0000000..4fadb7b
--- /dev/null
+++ b/docs/docs/styles/grid-column/twelve-column.mdx
@@ -0,0 +1,127 @@
+---
+title: Grid columns - twelve column
+---
+
+This provides styles for a twelve-column grid.
+
+The following sizes are available:
+
+- col-1-12
+- col-2-12
+- col-3-12
+- col-4-12
+- col-5-12
+- col-6-12
+- col-7-12
+- col-8-12
+- col-9-12
+- col-10-12
+- col-11-12
+- col-12-12
+
+Each column size has a class to go with each of the [media query viewport sizes](/styles/media#viewport-media-queries). For example:
+
+```css
+col-1-12-3xs
+col-1-12-2xs
+col-1-12-xs
+col-1-12-sm
+col-1-12-md
+col-1-12-lg
+col-1-12-xl
+col-1-12-2xl
+col-1-12-3xl
+col-1-12-4xl
+col-1-12-5xl
+```
+
+## How to import into your CSS
+
+Import this into your CSS with:
+
+```css
+@import 'cacao-css/dist/grid-column/col-12.css';
+```
+
+Imports are available for all [media query viewport sizes](/styles/media#viewport-media-queries).
+
+```css
+@import 'cacao-css/dist/grid-column/3xs/col-12.css';
+@import 'cacao-css/dist/grid-column/2xs/col-12.css';
+@import 'cacao-css/dist/grid-column/xs/col-12.css';
+@import 'cacao-css/dist/grid-column/sm/col-12.css';
+@import 'cacao-css/dist/grid-column/md/col-12.css';
+@import 'cacao-css/dist/grid-column/lg/col-12.css';
+@import 'cacao-css/dist/grid-column/xl/col-12.css';
+@import 'cacao-css/dist/grid-column/2xl/col-12.css';
+@import 'cacao-css/dist/grid-column/3xl/col-12.css';
+@import 'cacao-css/dist/grid-column/4xl/col-12.css';
+@import 'cacao-css/dist/grid-column/5xl/col-12.css';
+```
+
+See [Import Cacao CSS](/import) for more information.
+
+## Source CSS
+
+
+import CodeBlock from '@theme/CodeBlock';
+import ImportsSource from '!!raw-loader!../../../../dist/grid-column/col-12.css';
+import ImportsSource3xs from '!!raw-loader!../../../../dist/grid-column/3xs/col-12.css';
+import ImportsSource2xs from '!!raw-loader!../../../../dist/grid-column/2xs/col-12.css';
+import ImportsSourceXs from '!!raw-loader!../../../../dist/grid-column/xs/col-12.css';
+import ImportsSourceSm from '!!raw-loader!../../../../dist/grid-column/sm/col-12.css';
+import ImportsSourceMd from '!!raw-loader!../../../../dist/grid-column/md/col-12.css';
+import ImportsSourceLg from '!!raw-loader!../../../../dist/grid-column/lg/col-12.css';
+import ImportsSourceXl from '!!raw-loader!../../../../dist/grid-column/xl/col-12.css';
+import ImportsSource2xl from '!!raw-loader!../../../../dist/grid-column/2xl/col-12.css';
+import ImportsSource3xl from '!!raw-loader!../../../../dist/grid-column/3xl/col-12.css';
+import ImportsSource4xl from '!!raw-loader!../../../../dist/grid-column/4xl/col-12.css';
+import ImportsSource5xl from '!!raw-loader!../../../../dist/grid-column/5xl/col-12.css';
+
+### Default styles
+
+{ImportsSource}
+
+### 3xs styles
+
+{ImportsSource3xs}
+
+### 2xs styles
+
+{ImportsSource2xs}
+
+### xs styles
+
+{ImportsSourceXs}
+
+### sm styles
+
+{ImportsSourceSm}
+
+### md styles
+
+{ImportsSourceMd}
+
+### lg styles
+
+{ImportsSourceLg}
+
+### xl styles
+
+{ImportsSourceXl}
+
+### 2xl styles
+
+{ImportsSource2xl}
+
+### 3xl styles
+
+{ImportsSource3xl}
+
+### 4xl styles
+
+{ImportsSource4xl}
+
+### 5xl styles
+
+{ImportsSource5xl}
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
index 7670ceb..0ff1fad 100644
--- a/docs/sidebars.ts
+++ b/docs/sidebars.ts
@@ -198,6 +198,16 @@ const sidebars: SidebarsConfig = {
id: 'styles/grid-column/ten-column',
label: '10 column',
},
+ {
+ type: 'doc',
+ id: 'styles/grid-column/eleven-column',
+ label: '11 column',
+ },
+ {
+ type: 'doc',
+ id: 'styles/grid-column/twelve-column',
+ label: '12 column',
+ },
{
type: 'doc',
id: 'styles/grid-column/fill-column',