Complete reference for grid-columns.

docs/styles/grid/grid_columns.md

@@ -1 +1,61 @@
 # Grid-columns
+
+The `grid-columns` style allows to define the width of the columns of the grid.
+
+## Syntax
+
+```sass
+grid-columns: <SCALAR> . . .;
+```
+
+If there are more columns in the grid than scalars specified in `grid-columns`, they are reused cyclically.
+
+Scalar units can be mixed.
+
+--8<-- "docs/styles/snippets/scalar_syntax.md"
+
+## Example
+
+The example below shows a grid with 10 labels laid out in a grid with 2 rows and 5 columns.
+
+We set `grid-columns: 1fr 16 2fr`.
+Because there are more rows than scalars in the style rule, the scalars will be reused:
+
+ - columns 1 and 4 have width `1fr`;
+ - columns 2 and 5 have width `16`; and
+ - column 3 has width `2fr`.
+
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/grid_columns.py"}
+    ```
+
+=== "grid_columns.py"
+
+    ```py
+    --8<-- "docs/examples/styles/grid_columns.py"
+    ```
+
+=== "grid_columns.css"
+
+    ```css
+    --8<-- "docs/examples/styles/grid_columns.css"
+    ```
+
+## CSS
+
+```sass
+/* Set all columns to have 50% width */
+grid-columns: 50%;
+
+/* Every other column is twice as wide as the first one */
+grid-columns: 1fr 2fr;
+```
+
+### Python
+
+```py
+grid.styles.grid_columns = "50%"
+grid.styles.grid_columns = "1fr 2fr"
+```