Grid Diagrams

Grid diagrams let you display objects in a structured grid.

Two keywords do all the magic:

• grid-rows
• grid-columns

Setting just grid-rows:

Setting just grid-columns:

Setting both grid-rows and grid-columns:

Width and height

To create specific constructions, use width and/or height.

Notice how objects are evenly distributed within each row.

Cells expand to fill

When you define only one of row or column, objects will expand.

Notice how Voters and Non-voters fill the space.

Dominant direction

When you apply both row and column, the first appearance is the dominant direction. The dominant direction is the order in which cells are filled.

For example:

Since grid-rows is defined first, objects will fill rows before moving onto columns.

But if it were reversed:

It would do the opposite.

info

These animations are also pure D2, so you can animate grid diagrams being built-up. Use the animate-interval flag with this code. More on this later, in the composition section.

Gap size

You can control the gap size of the grid with 3 keywords:

• vertical-gap
• horizontal-gap
• grid-gap

Setting grid-gap is equivalent to setting both vertical-gap and horizontal-gap.

vertical-gap and horizontal-gap can override grid-gap.

Gap size 0

grid-gap: 0 in particular can create some interesting constructions:

Like this map of Japan

D2 source

Or a table of data

info

You may find it easier to just use Markdown tables though, especially if there are duplicate cells.

Gap size 0

Connections

Connections for grids themselves work normally as you'd expect.

Source code here.

Connections between grid cells

Connections between shapes inside a grid work a bit differently. Because a grid structure imposes positioning outside what the layout engine controls, the layout engine is also unable to make routes. Therefore, these connections are center-center straight segments, i.e., no path-finding.

Source code here.

Source code here.

Nesting

Currently you can nest grid diagrams within grid diagrams. Nesting other types is coming 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.

It'd be nicer if it were centered. This can be achieved by adding 2 invisible elements.

Troubleshooting

Why is there extra padding in one cell?

Elements in a grid column have the same width and elements in a grid row have the same height.

So in this example, a small empty space in "Backend Node" is present.

It's due to the label of "Flask Pod" being slightly longer than "Next Pod". So the way we fix that is to set widths to match.