👌IMPROVE: Allow auto for grid columns (#8)

Author: chrisjsewell

README.md

@@ -87,6 +87,8 @@ rtd PRs not working
 
 size octicons to 1rem etc
 
+empty grid item
+
 [github-ci]: https://github.com/executablebooks/sphinx-design/workflows/continuous-integration/badge.svg?branch=main
 [github-link]: https://github.com/executablebooks/sphinx-design
 [codecov-badge]: https://codecov.io/gh/executablebooks/sphinx-design/branch/main/graph/badge.svg

docs/badges_buttons.md

@@ -166,13 +166,13 @@ A coloured icon: :octicon-16:`report;sd-text-info`, some more text.
 ```
 ````
 
-````{Dropdown} All Octicons (16px)
+````{dropdown} All Octicons (16px)
 ```{_all-octicon}
 :size: 16
 ```
 ````
 
-````{Dropdown} All Octicons (24px)
+````{dropdown} All Octicons (24px)
 ```{_all-octicon}
 :size: 24
 ```

docs/css_classes.md

@@ -23,7 +23,7 @@ Some CSS styled text
 ````
 `````
 
-If you find yourself using a class(es) often, consider openeing an issue to request a new role/directive or option!
+If you find yourself using a class(es) often, consider opening an issue to request a new role/directive or option!
 
 ## Text
 

docs/grids.md

@@ -41,6 +41,30 @@ D
 ````
 `````
 
+You can also use the `auto` value for the column width(s), to size columns based on the natural width of their content.
+
+::::{grid} auto
+
+:::{grid-item}
+:outline:
+:padding: 2
+
+short text content
+:::
+:::{grid-item}
+:outline:
+:padding: 2
+
+some longer text content
+:::
+:::{grid-item}
+:outline:
+:padding: 2
+
+short text content
+:::
+::::
+
 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:
 
 ::::{grid} 2

sphinx_design/compiled/style.min.css

@@ -73,9 +73,9 @@ def _media_option(
 def row_columns_option(argument: Optional[str]) -> List[str]:
     """Validate the number of columns (out of 12) a grid row will have.
 
-    One or four integers (for "xs sm md lg") between 1 and 12.
+    One or four integers (for "xs sm md lg") between 1 and 12  (or 'auto').
     """
-    return _media_option(argument, "sd-row-cols-")
+    return _media_option(argument, "sd-row-cols-", allow_auto=True)
 
 
 def item_columns_option(argument: Optional[str]) -> List[str]:

sphinx_design/grids.py

@@ -81,6 +81,11 @@ $gutter-widths: $spacings;
   -ms-flex: 1 0 0%;
 }
 
+.sd-row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
+}
+
 @for $i from 1 through 12 {
   .sd-row-cols-#{$i} {
     > * {