In mkdocs-material v9.5.0, support for grids was introduced. While upstream requires a third-party mkdocs plugin (& raw HTML for <div> container), we could simply use a combination of rst-class and container directives.
rST equivalent to material MD
```rst
.. rst-example:: Card grid
.. rst-class:: grid cards
.. container::
- :si-icon:`fontawesome/brands/html5` **HTML** for content and structure
- :si-icon:`fontawesome/brands/js` **JavaScript** for interactivity
- :si-icon:`fontawesome/brands/css3` **CSS** for text running out of boxes
- :si-icon:`fontawesome/brands/internet-explorer` **Internet Explorer** ... huh?
```
```rst
.. rst-example:: Card grid, blocks
.. rst-class:: grid
.. container::
.. rst-class:: card
:si-icon:`fontawesome/brands/html5` **HTML** for content and structure
.. rst-class:: card
:si-icon:`fontawesome/brands/js` **JavaScript** for interactivity
.. rst-class:: card
:si-icon:`fontawesome/brands/css3` **CSS** for text running out of boxes
:si-icon:`fontawesome/brands/internet-explorer` **Internet Explorer** ... huh?
```
```rst
.. rst-example:: Generic grid
.. rst-class:: grid
.. container::
.. md-tab-set::
.. md-tab-item:: Unordered list
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
.. md-tab-item:: Ordered list
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
.. code-block:: rst
:caption: Content tabs
.. md-tab-set::
.. md-tab-item:: Unordered list
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
.. md-tab-item:: Ordered list
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
```
It would nicer to have a directive that acts as syntactic sugar to automatically achieve this. For inspiration, sphinx-design has a grid and grid-tem directives, although they are a bit more deterministic than upstream's implementation.
In mkdocs-material v9.5.0, support for grids was introduced. While upstream requires a third-party mkdocs plugin (& raw HTML for
<div>container), we could simply use a combination ofrst-classandcontainerdirectives.rST equivalent to material MD
```rst .. rst-example:: Card grid .. rst-class:: grid cards .. container:: - :si-icon:`fontawesome/brands/html5` **HTML** for content and structure - :si-icon:`fontawesome/brands/js` **JavaScript** for interactivity - :si-icon:`fontawesome/brands/css3` **CSS** for text running out of boxes - :si-icon:`fontawesome/brands/internet-explorer` **Internet Explorer** ... huh? ``` ```rst .. rst-example:: Card grid, blocks .. rst-class:: grid .. container:: .. rst-class:: card :si-icon:`fontawesome/brands/html5` **HTML** for content and structure .. rst-class:: card :si-icon:`fontawesome/brands/js` **JavaScript** for interactivity .. rst-class:: card :si-icon:`fontawesome/brands/css3` **CSS** for text running out of boxes :si-icon:`fontawesome/brands/internet-explorer` **Internet Explorer** ... huh? ``` ```rst .. rst-example:: Generic grid .. rst-class:: grid .. container:: .. md-tab-set:: .. md-tab-item:: Unordered list * Sed sagittis eleifend rutrum * Donec vitae suscipit est * Nulla tempor lobortis orci .. md-tab-item:: Ordered list 1. Sed sagittis eleifend rutrum 2. Donec vitae suscipit est 3. Nulla tempor lobortis orci .. code-block:: rst :caption: Content tabs .. md-tab-set:: .. md-tab-item:: Unordered list * Sed sagittis eleifend rutrum * Donec vitae suscipit est * Nulla tempor lobortis orci .. md-tab-item:: Ordered list 1. Sed sagittis eleifend rutrum 2. Donec vitae suscipit est 3. Nulla tempor lobortis orci ```
It would nicer to have a directive that acts as syntactic sugar to automatically achieve this. For inspiration, sphinx-design has a
gridandgrid-temdirectives, although they are a bit more deterministic than upstream's implementation.