Grid Directives
.. grid:: is sphinx-design's responsive row and .. grid-item:: is one
cell of it. Like .. dropdown:: neither is part of docutils or Sphinx, and
like it they earn their place by containing things: an unknown directive
never parses its body, so before these existed everything written inside a grid
— prose, targets, entities, diagrams — was invisible to every later phase.
A grid's argument says how many of twelve columns the row splits into. One value applies at every breakpoint; four are read as xs sm md lg:
One column on a narrow screen, two once there is room. Resize the window and the two cells stack.
Each cell's body is ordinary block content, so it can hold anything a document can — including the directives on the pages below.
Columns
"Columns" shows the row's own count and a cell's :columns: override. A
twelve-column row with one cell spanning four of them:
:columns: 4
:columns: 8 — the two together fill the row.
Spacing
"Spacing" shows :gutter:, :margin: and :padding:. The gutter is the
space between cells and takes the same one-or-four breakpoint values the
column counts do:
:gutter: 5
is the widest
step there is.
Alignment
"Alignment" shows :child-direction: and :child-align:, which govern how
a cell lays its own content out, and :reverse:, which lays the row out
right to left:
Written first, drawn second.
Written second, drawn first.
Nesting
"Nesting" is the page this family was added for: it draws a PlantUML diagram
from inside a .. grid-item::.