Skip to content

Grid

Grids - Material for MkDocs

Configuration

将以下行添加到 mkdocs.yml : 

markdown_extensions: 
  - attr_list
  - md_in_html

查看其他配置选项：

Usage

卡片网格

列表语法

表语法本质上是卡片网格的快捷方式，它由一个无序（或有序）列表组成，列表被 div 包裹，并且同时具有 grid 和 cards 类：

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][mkdocs-material] with [pip][pip] and get up and running in minutes

    [ Getting started][getting started]

  • It's just Markdown

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

    [ Reference][reference]

  • Made to measure

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

    [ Customization][customization]

  • Open Source, MIT

    Material for MkDocs is licensed under MIT and available on [GitHub]

    [ License][license]

块语法

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

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>
  • 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