diff --git a/docs/css_classes.md b/docs/css_classes.md
index b87e1d1..f6f1b32 100644
--- a/docs/css_classes.md
+++ b/docs/css_classes.md
@@ -93,13 +93,13 @@ For more information, see [this guide to flexbox](https://css-tricks.com/snippet
## Sizing
-Size objects width/height by percentage:
+Size objects (`w`)idth/(`h`)eight by percentage:
-- `sd-width-25`, `sd-height-25`
-- `sd-width-50`, `sd-height-50`
-- `sd-width-75`, `sd-height-75`
-- `sd-width-100`, `sd-height-100`
-- `sd-width-auto`, `sd-height-auto`
+- `sd-w-25`, `sd-h-25`
+- `sd-w-50`, `sd-h-50`
+- `sd-w-75`, `sd-h-75`
+- `sd-w-100`, `sd-h-100`
+- `sd-w-auto`, `sd-h-auto`
## Spacing
diff --git a/docs/get_started.md b/docs/get_started.md
index 48ecfd5..16f0f83 100644
--- a/docs/get_started.md
+++ b/docs/get_started.md
@@ -24,6 +24,14 @@ extensions = ["myst_parser", "sphinx_design"]
myst_enable_extensions = ["colon_fence"]
```
+:::{note}
+The MyST Markdown examples in this documentation assume that certain optional [MyST syntax extensions](https://myst-parser.readthedocs.io/en/latest/syntax/optional.html) have been enabled, *via* the `myst_enable_extensions` configuration above:
+
+- `colon_fence`: used by all examples, to write directives delimited by `:::` fences
+- `html_image`: only for examples using raw HTML `
` tags, such as the avatar images in [CSS Classes](./css_classes.md)
+- `attrs_inline`: only for examples adding attributes to inline elements, such as the links to synchronised [Tabs](./tabs.md)
+:::
+
## Configuration
To hide the title header of a page, add to the top of the page:
diff --git a/docs/grids.md b/docs/grids.md
index 69b987d..5de87e1 100644
--- a/docs/grids.md
+++ b/docs/grids.md
@@ -10,6 +10,10 @@ A `grid` directive can be set with the number of default columns (1 to 12);
either a single number for all screen sizes, or four numbers for extra-small (<576px), small (768px), medium (992px) and large screens (>1200px),
then child `grid-item` directives should be set for each item.
+Note, a single number **fixes** the number of columns for all screen sizes,
+whereas four numbers allow the layout to adapt responsively to the screen size,
+as in the example below.
+
Try re-sizing the screen to see the number of columns change:
::::{grid} 1 2 3 4
@@ -65,6 +69,54 @@ short text content
:::
::::
+## Multiple rows
+
+There is no need to add a directive per row;
+when the number of items exceeds the number of columns,
+the additional items simply wrap onto new rows, as required:
+
+::::{grid} 3
+:outline:
+
+:::{grid-item}
+A
+:::
+:::{grid-item}
+B
+:::
+:::{grid-item}
+C
+:::
+:::{grid-item}
+D
+:::
+::::
+
+However, to deliberately separate items into distinct rows,
+use a separate `grid` directive for each row:
+
+::::{grid} 3
+:outline:
+
+:::{grid-item}
+A
+:::
+:::{grid-item}
+B
+:::
+::::
+
+::::{grid} 3
+:outline:
+
+:::{grid-item}
+C
+:::
+:::{grid-item}
+D
+:::
+::::
+
## Placing a card in a grid
The `grid-item-card` directive is a short-hand for placing a card content container inside a grid item (see [Cards](./cards.md)). Most of the `card` directive's options can be used also here:
@@ -134,7 +186,9 @@ B
You can override the number of columns a single item takes up by using the `columns` option of the `grid-item` directive.
Given the total columns are 12, this means 12 would indicate a single item takes up the entire grid row, or 6 half.
Alternatively, use `auto` to automatically decide how many columns to use based on the item content.
-Like for grid columns, you can either provide a single number or four for small, medium and large and extra-large screens.
+Like for grid columns, you can either provide a single number or four for small, medium and large and extra-large screens,
+and likewise, a single number fixes the item's width for all screen sizes,
+overriding any responsive behaviour set by the parent `grid`.
::::{grid} 2
:::{grid-item-card}
diff --git a/docs/tabs.md b/docs/tabs.md
index 25114d1..3f19b88 100644
--- a/docs/tabs.md
+++ b/docs/tabs.md
@@ -97,6 +97,33 @@ Content 2
````
`````
+### Linking to synchronised tabs
+
+To author a link that pre-selects a tab, append the query string (and optionally a page anchor) to the URL of the **built** HTML page.
+Sphinx referencing roles, such as `ref` and `doc`, cannot output URLs containing query strings,
+so instead write the URL directly:
+
+- In MyST Markdown, add an `external` class to the link (using the [`attrs_inline` extension](https://myst-parser.readthedocs.io/en/latest/syntax/optional.html)), so that the URL is output as-is, rather than being resolved as a cross-reference.
+- In reStructuredText, use a standard (external) hyperlink.
+
+````{tab-set-code}
+```{code-block} markdown
+[Open with key2 selected](tabs.html?category=key2#synchronised-tabs){.external}
+```
+```{code-block} rst
+`Open with key2 selected `_
+```
+````
+
+For example: [open the tabs above with `key2` selected](tabs.html?category=key2#synchronised-tabs){.external}
+
+:::{warning}
+Such URLs are relative to the location of the current page in the built HTML output, not to the source files
+(for example, a page in a sub-folder would require `../tabs.html?...`).
+They are not checked by Sphinx, so they will break silently if the target page is moved,
+and they do not apply to other output formats.
+:::
+
## Tabbed code examples
The `tab-set-code` directive provides a shorthand for synced code examples.