diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md
index d46a292..3966e8c 100644
--- a/docs/tour/grid-diagrams.md
+++ b/docs/tour/grid-diagrams.md
@@ -7,6 +7,8 @@ import GridDimensions from '@site/static/d2/grid-dimensions.d2';
import GridFill from '@site/static/d2/grid-fill.d2';
import GridNestedGrid from '@site/static/d2/grid-nested-grid.d2';
import Table from '@site/static/d2/table.d2';
+import GridUnaligned from '@site/static/d2/grid-unaligned.d2';
+import GridAligned from '@site/static/d2/grid-aligned.d2';
# Grid Diagrams
@@ -168,6 +170,27 @@ soon.
+## Aligning with invisible elements
+
+A common technique to align grid elements to your liking is to pad the grid with invisible
+elements.
+
+Consider the following diagram.
+
+
+ {GridUnaligned}
+
+
+
+
+It'd be nicer if it were centered. This can be achieved by adding 2 invisible elements.
+
+
+ {GridAligned}
+
+
+
+
## Source code
This is the script for the image at the top of this page.
diff --git a/static/d2/grid-aligned.d2 b/static/d2/grid-aligned.d2
new file mode 100644
index 0000000..bec0005
--- /dev/null
+++ b/static/d2/grid-aligned.d2
@@ -0,0 +1,27 @@
+classes: {
+ invisible: {
+ style.opacity: 0
+ label: a
+ }
+}
+
+grid-columns: 1
+us-east-1: {
+ grid-rows: 1
+ a
+ b
+ c
+ d
+ e
+}
+
+us-west-1: {
+ grid-rows: 1
+ pad1.class: invisible
+ pad2.class: invisible
+ a
+ # Move the label so it doesn't go through the connection
+ label.near: bottom-center
+}
+
+us-east-1.c -> us-west-1.a
diff --git a/static/d2/grid-unaligned.d2 b/static/d2/grid-unaligned.d2
new file mode 100644
index 0000000..2d9335a
--- /dev/null
+++ b/static/d2/grid-unaligned.d2
@@ -0,0 +1,16 @@
+grid-columns: 1
+us-east-1: {
+ grid-rows: 1
+ a
+ b
+ c
+ d
+ e
+}
+
+us-west-1: {
+ grid-rows: 1
+ a
+}
+
+us-east-1.c -> us-west-1.a
diff --git a/static/img/generated/grid-aligned.svg2 b/static/img/generated/grid-aligned.svg2
new file mode 100644
index 0000000..5165af6
--- /dev/null
+++ b/static/img/generated/grid-aligned.svg2
@@ -0,0 +1,181 @@
+
diff --git a/static/img/generated/grid-unaligned.svg2 b/static/img/generated/grid-unaligned.svg2
new file mode 100644
index 0000000..4b0e395
--- /dev/null
+++ b/static/img/generated/grid-unaligned.svg2
@@ -0,0 +1,181 @@
+