2 files changed, 37 insertions, 0 deletions
diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
new file mode 100644
index 0000000..b4bc240
--- /dev/null
+++ b/public/css/layout/grid.css
@@ -0,0 +1,36 @@
+:is(main, article, header, footer, nav) {
+  padding-inline-start: var(--grid-padding-start);
+  padding-inline-end: calc(
+    100vw - (var(--grid-padding-start) + (
+      var(--grid-column-width) * var(--grid-column-count) +
+      var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+    ))
+  );
+}
+
+.grid-span-1 {
+  width: var(--grid-column-width);
+}
+
+.grid-span-2 {
+  width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
+}
+
+.grid-span-6 {
+  width: calc(
+    var(--grid-column-width) * min(6, var(--grid-column-count)) +
+    var(--grid-gutter-width) * min(5, (var(--grid-column-count) - 1))
+  );
+}
+
+.grid-span-full {
+  width: calc(
+    var(--grid-column-width) * var(--grid-column-count) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+  )
+}
+
+.grid-end-end {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
+\ No newline at end of file
diff --git a/public/css/layout/index.css b/public/css/layout/index.css
index e69de29..08d6c13 100644
--- a/public/css/layout/index.css
+++ b/public/css/layout/index.css
@@ -0,0 +1 @@
+@import './grid.css';
+\ No newline at end of file