Skip to content

网格

Material for MkDocs 使得将各个部分排列成网格变得容易，可以将传达相似含义或具有相等重要性的块分组在一起。网格非常适用于构建索引页面，以简要概述文档的大部分内容。

配置

此配置启用了对网格的使用，允许将相同或不同类型的块组合成矩形形状。在mkdocs.yml中添加以下行：

markdown_extensions: # (1)!
  - attr_list
  - md_in_html
  1. 请注意，下面列出的一些示例使用了图标和表情符号，需要单独配置。

查看附加的配置选项：

使用方法

网格有两种风格：卡片网格，将每个元素包装在悬停时漂浮的卡片中；通用网格，允许将任意块元素排列成矩形形状。

使用卡片网格

仅赞助商 · insiders-4.12.0 · 实验性

卡片网格会使用漂亮的悬停卡片包装每个网格项。卡片网格有两种略微不同的语法：列表语法和块语法，支持不同的用例。

列表语法

列表语法本质上是[卡片网格]的一种快捷方式，它由一个带有grid和cards类的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 个或更多项的形式进行渲染，例如在隐藏两侧边栏时。

块语法

块语法允许将卡片网格与其他元素一起排列在网格中，如[通用网格]部分所述。只需在grid内的任何块元素中添加card类即可：

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?

虽然这种语法一开始可能看起来过于冗长，但前面的示例展示了如何将卡片网格与其他会拉伸到网格的元素混合使用。

使用通用网格

仅赞助商 · insiders-4.12.0 · 实验性

通用网格允许将任意块元素排列成网格，包括警告块、代码块、内容选项卡等。只需使用带有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>
  • Sed sagittis eleifend rutrum
  • Donec vitae suscipit est
  • Nulla tempor lobortis orci
  1. Sed sagittis eleifend rutrum
  2. Donec vitae suscipit est
  3. 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