Merge pull request terrastruct#217 from terrastruct/grid-inv

add grid tip

Author: alixander

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.
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-nested-grid.svg2')}}></div>
 
+## 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.
+
+<CodeBlock className="language-d2">
+    {GridUnaligned}
+</CodeBlock>
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-unaligned.svg2')}}></div>
+
+It'd be nicer if it were centered. This can be achieved by adding 2 invisible elements.
+
+<CodeBlock className="language-d2">
+    {GridAligned}
+</CodeBlock>
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-aligned.svg2')}}></div>
+
 ## Source code
 
 This is the script for the image at the top of this page.

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

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