diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 73bf9b1..963c93d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -51,7 +51,7 @@ const { title, backLink } = Astro.props;
diff --git a/src/layouts/GridLayout.astro b/src/layouts/GridLayout.astro
new file mode 100644
index 0000000..5b19c4b
--- /dev/null
+++ b/src/layouts/GridLayout.astro
@@ -0,0 +1,28 @@
+---
+import cx from 'classnames';
+
+import BaseLayout from './BaseLayout.astro';
+
+export interface Props {
+ class?: string;
+ grid?: 'wide' | 'narrow';
+}
+
+const { frontmatter, class: className, grid = 'wide' } = Astro.props;
+const gridVariant = frontmatter.grid || grid;
+
+const gridClasses = cx('grid w-full grid-cols-18', className);
+const wrapperClasses = cx(
+ 'col-start-2 col-end-18',
+ { 'md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13': gridVariant === 'narrow' },
+ { 'md:col-start-3 md:col-end-16': gridVariant === 'wide' }
+);
+---
+
+
+
+
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index b7364a4..adf04a7 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -1,11 +1,18 @@
---
-import BaseLayout from '../layouts/BaseLayout.astro';
import { Title } from '../components/Title';
-const { frontmatter } = Astro.props;
+import GridLayout from './GridLayout.astro';
+
+export interface Props {
+ class?: string;
+ grid?: 'wide' | 'narrow';
+}
+
+const { frontmatter, class: className, grid = 'wide' } = Astro.props;
+const gridVariant = frontmatter.grid || grid;
---
-
+
{frontmatter.title}
-
+