网格¶

MkDocs的材料使将部分排列成网格、分组变得容易传达相似含义或同等重要的块。网格只是非常适合构建显示大部分简要概述的索引页面您的文档。

配置¶

这种配置允许使用网格，允许将块将相同或不同类型的形状转换为矩形。添加以下行转到mkdocs.yml：

markdown_extensions: # (1)!
  - attr_list
  - md_in_html

请注意，下面列出的一些示例使用了[图标和表情符号] 必须[单独配置]。

请参阅其他配置选项：

使用¶

网格有两种类型：[卡片网格]，它将每个元素包裹在一张卡片中悬停时悬浮，以及[通用网格]，允许排列任意块矩形形状的元素。

使用卡片网格¶

卡片网格用一张漂亮的悬浮卡片包裹每个网格项目悬停。它们有两种稍微不同的语法：list和block syntax，添加对不同用例的支持。

列表语法¶

列表语法本质上是[卡片网格]的快捷方式，由无序（或有序）列表，由一个带有“网格”和“卡片”的“div”包裹` 类别：

Card grid

<div class="grid cards" markdown>

- :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?

</div>

HTML for content and structure
JavaScript for interactivity
CSS for text running out of boxes
Internet Explorer ... huh?

列表元素可以包含任意的Markdown，只要周围的div 定义markdown属性。下面是一个更复杂的例子包括图标和链接：

Card grid, complex example

<div class="grid cards" markdown>

-   :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](#)

</div>

Set up in 5 minutes

Install mkdocs-material with pip and get up and running in minutes

Getting started
It's just Markdown

Focus on your content and generate a responsive and searchable static site

Reference
Made to measure

Change the colors, fonts, language, icons, logo and more with a few lines

Customization
Open Source, MIT

Material for MkDocs is licensed under MIT and available on GitHub

License

如果没有足够的空间来渲染彼此相邻的网格项将拉伸到视口的整个宽度，例如在移动视口上。如果有更多可用空间，网格将以3个或更多项目呈现，例如。当[隐藏两个侧边栏]时。

块语法¶

块语法允许将卡片与其他卡片一起排列在网格中 elements_，如[通用网格]一节所述。只需添加“卡”` 类到“网格”内的任何块元素：

Card grid, blocks

<div class="grid" markdown>

: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?

</div>

HTML for content and structure

JavaScript for interactivity

CSS for text running out of boxes

Internet Explorer ... huh?

虽然这种语法起初可能看起来不必要地冗长，但前面的示例显示了卡网格现在如何与其他也会拉伸的元素混合到电网。

使用通用网格¶

通用网格允许在网格中排列任意块元素，包括 [警告]、[代码块]、[内容选项卡]等。只需包裹一组积木通过在grid类中使用div：

Generic grid

<div class="grid" markdown>

=== "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
```

</div>

Unordered listOrdered list

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

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