diff --git a/docs/reference/code-blocks.md b/docs/reference/code-blocks.md
index 5ea72edd5..80e89ca06 100644
--- a/docs/reference/code-blocks.md
+++ b/docs/reference/code-blocks.md
@@ -1,6 +1,6 @@
---
template: overrides/main.html
-icon: material/code-tags
+icon: material/code-json
---
# Code blocks
diff --git a/docs/reference/diagrams.md b/docs/reference/diagrams.md
index 5d56a7d63..4a587177f 100644
--- a/docs/reference/diagrams.md
+++ b/docs/reference/diagrams.md
@@ -1,6 +1,6 @@
---
template: overrides/main.html
-icon: material/chart-gantt
+icon: material/graph-outline
---
# Diagrams
diff --git a/docs/reference/grids.md b/docs/reference/grids.md
new file mode 100644
index 000000000..3e2cf6610
--- /dev/null
+++ b/docs/reference/grids.md
@@ -0,0 +1,304 @@
+---
+template: overrides/main.html
+icon: material/view-grid-plus
+---
+
+# Grids
+
+Material for MkDocs makes it easy to arrange sections into grids, grouping
+blocks that convey similar meaning or are of equal importance. Grids are just
+perfect for building index pages that show a brief overview of a large section
+of your documentation.
+
+## Configuration
+
+This configuration enables the use of grids, allowing to bring blocks of
+identical or different types into a rectangular shape. Add the following lines
+to `mkdocs.yml`:
+
+``` yaml
+markdown_extensions: # (1)!
+ - attr_list
+ - md_in_html
+```
+
+1. Note that some of the examples listed below use [icons and emojis], which
+ have to be [configured separately].
+
+See additional configuration options:
+
+- [Attribute Lists]
+- [Markdown in HTML]
+
+ [icons and emojis]: icons-emojis.md
+ [configured separately]: icons-emojis.md#configuration
+ [Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
+ [Markdown in HTML]: ../setup/extensions/python-markdown.md#markdown-in-html
+
+## Usage
+
+Grids come in two flavors: [card grids], which wrap each element in a card that
+levitates on hover, and [generic grids], which allow to arrange arbitrary block
+elements in a rectangular shape.
+
+ [card grids]: #using-card-grids
+ [generic grids]: #using-generic-grids
+
+### Using card grids
+
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
+[:octicons-tag-24: insiders-4.12.0][Insiders] ·
+:octicons-beaker-24: Experimental
+
+Card grids wrap each grid item with a beautiful hover card that levitates on
+hover. They come in two slightly different syntaxes: [list] and [block syntax],
+adding support for distinct use cases.
+
+ [Insiders]: ../insiders/index.md
+ [list]: #list-syntax
+ [block syntax]: #block-syntax
+
+#### List syntax
+
+The list syntax is essentially a shortcut for [card grids], and consists of an
+unordered (or ordered) list wrapped by a `div` with both, the `grid` and `cards`
+classes:
+
+``` html title="Card grid"
+
+
+- :fontawesome-brands-html5: __HTML__ for content and structure
+- :fontawesome-brands-js: __JavaScript__ for interactivity
+- :fontawesome-brands-css3: __CSS__ for text running out of boxes
+- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+
+```
+
+
+
+
+- :fontawesome-brands-html5: __HTML__ for content and structure
+- :fontawesome-brands-js: __JavaScript__ for interactivity
+- :fontawesome-brands-css3: __CSS__ for text running out of boxes
+- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+
+
+
+- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
+
+ ---
+
+ Install [`mkdocs-material`](#) with [`pip`](#) and get up
+ and running in minutes
+
+ [:octicons-arrow-right-24: Getting started](#)
+
+- :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__
+
+ ---
+
+ Focus on your content and generate a responsive and searchable static site
+
+ [:octicons-arrow-right-24: Reference](#)
+
+- :material-format-font:{ .lg .middle } __Made to measure__
+
+ ---
+
+ Change the colors, fonts, language, icons, logo and more with a few lines
+
+ [:octicons-arrow-right-24: Customization](#)
+
+- :material-scale-balance:{ .lg .middle } __Open Source, MIT__
+
+ ---
+
+ Material for MkDocs is licensed under MIT and available on [GitHub]
+
+ [:octicons-arrow-right-24: License](#)
+
+
+```
+
+
+
+
+- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
+
+ ---
+
+ Install [`mkdocs-material`][mkdocs-material] with [`pip`][pip] and get up
+ and running in minutes
+
+ [:octicons-arrow-right-24: Getting started][getting started]
+
+- :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__
+
+ ---
+
+ Focus on your content and generate a responsive and searchable static site
+
+ [:octicons-arrow-right-24: Reference][reference]
+
+- :material-format-font:{ .lg .middle } __Made to measure__
+
+ ---
+
+ Change the colors, fonts, language, icons, logo and more with a few lines
+
+ [:octicons-arrow-right-24: Customization][customization]
+
+- :material-scale-balance:{ .lg .middle } __Open Source, MIT__
+
+ ---
+
+ Material for MkDocs is licensed under MIT and available on [GitHub]
+
+ [:octicons-arrow-right-24: License][license]
+
+
+
+
+:fontawesome-brands-html5: __HTML__ for content and structure
+{ .card }
+
+:fontawesome-brands-js: __JavaScript__ for interactivity
+{ .card }
+
+:fontawesome-brands-css3: __CSS__ for text running out of boxes
+{ .card }
+
+> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+
+```
+
+
+
+
+:fontawesome-brands-html5: __HTML__ for content and structure
+{ .card }
+
+:fontawesome-brands-js: __JavaScript__ for interactivity
+{ .card }
+
+:fontawesome-brands-css3: __CSS__ for text running out of boxes
+{ .card }
+
+> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+
+
+
+=== "Unordered list"
+
+ * Sed sagittis eleifend rutrum
+ * Donec vitae suscipit est
+ * Nulla tempor lobortis orci
+
+=== "Ordered list"
+
+ 1. Sed sagittis eleifend rutrum
+ 2. Donec vitae suscipit est
+ 3. Nulla tempor lobortis orci
+
+``` title="Content tabs"
+=== "Unordered list"
+
+ * Sed sagittis eleifend rutrum
+ * Donec vitae suscipit est
+ * Nulla tempor lobortis orci
+
+=== "Ordered list"
+
+ 1. Sed sagittis eleifend rutrum
+ 2. Donec vitae suscipit est
+ 3. Nulla tempor lobortis orci
+```
+
+````
+
+
+
+
+=== "Unordered list"
+
+ * Sed sagittis eleifend rutrum
+ * Donec vitae suscipit est
+ * Nulla tempor lobortis orci
+
+=== "Ordered list"
+
+ 1. Sed sagittis eleifend rutrum
+ 2. Donec vitae suscipit est
+ 3. Nulla tempor lobortis orci
+
+``` title="Content tabs"
+=== "Unordered list"
+
+ * Sed sagittis eleifend rutrum
+ * Donec vitae suscipit est
+ * Nulla tempor lobortis orci
+
+=== "Ordered list"
+
+ 1. Sed sagittis eleifend rutrum
+ 2. Donec vitae suscipit est
+ 3. Nulla tempor lobortis orci
+```
+
+
+