7 files changed, 114 insertions, 0 deletions
diff --git a/scss/layout/grid.md.scss b/scss/layout/grid.md.scss
new file mode 100644
index 0000000..f0c8478
--- /dev/null
+++ b/scss/layout/grid.md.scss
@@ -0,0 +1,8 @@
+:is(
+  header,
+  footer,
+  nav,
+  :is(main, article) > section:not(:is(section, header) :is(section, header))
+) {
+  padding-inline: var(--grid-padding);
+}
+\ No newline at end of file
diff --git a/scss/layout/grid.scss b/scss/layout/grid.scss
new file mode 100644
index 0000000..25cdd95
--- /dev/null
+++ b/scss/layout/grid.scss
@@ -0,0 +1,30 @@
+:is(
+  header,
+  footer,
+  nav,
+  :is(main, article) > section:not(:is(section, header) :is(section, header))
+):not(.section--full-width) {
+  padding-inline: calc(var(--grid-padding) + 0.5 * (100vw - var(--grid-total-width)));
+}
+
+.grid-span-1 {
+  width: var(--grid-column-width);
+}
+
+/* On screens narrower than 16rem, there is only one column. */
+
+.grid-span-2 {
+  width: var(--grid-column-width);
+}
+
+.grid-span-3 {
+  width: var(--grid-column-width);
+}
+
+.width-prose {
+  width: var(--prose-width);
+}
+
+.grid-span-full {
+  width: var(--grid-total-width);
+}
diff --git a/scss/layout/grid.xs.scss b/scss/layout/grid.xs.scss
new file mode 100644
index 0000000..e7c6d1a
--- /dev/null
+++ b/scss/layout/grid.xs.scss
@@ -0,0 +1,55 @@
+.grid-span-2 {
+  width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
+}
+
+.grid-span-3 {
+  width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
+}
+
+.grid-span-1.grid-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-column-count) - 1) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-2.grid-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-column-count) - 2) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 2)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-3.grid-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-column-count) - 3) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 3)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-1.grid-prose-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-prose-column-count) - 1) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-2.grid-prose-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-prose-column-count) - 2) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-3.grid-prose-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-prose-column-count) - 3) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3)
+  );
+  margin-inline-end: 0;
+}
+\ No newline at end of file
diff --git a/scss/layout/index.md.scss b/scss/layout/index.md.scss
new file mode 100644
index 0000000..c3bd183
--- /dev/null
+++ b/scss/layout/index.md.scss
@@ -0,0 +1,2 @@
+@use 'grid.md';
+
diff --git a/scss/layout/index.scss b/scss/layout/index.scss
new file mode 100644
index 0000000..776613a
--- /dev/null
+++ b/scss/layout/index.scss
@@ -0,0 +1,3 @@
+@use 'grid';
+@use 'section-margins';
+
diff --git a/scss/layout/index.xs.scss b/scss/layout/index.xs.scss
new file mode 100644
index 0000000..6e239b4
--- /dev/null
+++ b/scss/layout/index.xs.scss
@@ -0,0 +1,2 @@
+@use 'grid.xs';
+
diff --git a/scss/layout/section-margins.scss b/scss/layout/section-margins.scss
new file mode 100644
index 0000000..a11073f
--- /dev/null
+++ b/scss/layout/section-margins.scss
@@ -0,0 +1,14 @@
+:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) {
+  padding-block-start: var(--margin-block-lg);
+  padding-block-end: var(--margin-block-md);
+}
+
+footer {
+  padding-block-start: var(--margin-block-md);
+  padding-block-end: var(--margin-block-lg);
+}
+
+nav {
+  padding-block-start: var(--margin-block-sm);
+  padding-block-end: var(--margin-block-md);
+}
+\ No newline at end of file