跳转至

网格

使用带有 grid 类的 div 标签包裹一组区块，可以将任意区块元素排列成网格布局。

提示

列表语法是卡片网格的快捷写法。

列表语法

有两种写法：

1
2
3
4
5
6
7
8
<div class="grid cards" markdown>

-   :fontawesome-brands-linux: **Linux** for me
-   :fontawesome-brands-markdown: **Markdown** for this draft
-   :fontawesome-brands-bilibili: **Bilibili** for animate
-   :fontawesome-brands-python: **Python** for math

</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="grid" markdown>

:fontawesome-brands-linux: **Linux** for me
{ .card }

:fontawesome-brands-markdown: **Markdown** for this draft
{ .card }

:fontawesome-brands-bilibili: **Bilibili** for animate
{ .card }

:fontawesome-brands-python: **Python** for math
{ .card }

</div>

Linux for me

Markdown for this draft

Bilibili for animate

Python for math

注意

两种写法等价，后者多用于组合不同类型的块。尽量不使用带有 result 类的 div 标签包裹网格元素。

每个卡片的内容可以不止一行：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="grid cards" markdown>

-   :fontawesome-brands-linux: **Linux** for me

    ---

    [:octicons-arrow-right-24: Learn More](https://www.kernel.org/)

-   :fontawesome-brands-python: **Python** for math

    ---

    [:octicons-arrow-right-24: Learn More](https://www.python.org/)

</div>

通用网格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="grid" markdown>

**这是卡片内容块** 
{ .card }

> **这是引用内容块** 

=== ":octicons-file-code-16: `Content tab`"

    这是内容选项卡.

``` title="Code block"
这是代码块.
```

</div>

这是卡片内容块

这是引用内容块

这是内容选项卡.

Code block
这是代码块.

注意

尽量避免多层、不同块的嵌套1。

警告

我们约定，通用网格内只使用：卡片、引用、代码块、内容选项卡。

  1. 过多层的嵌套容易导致无意义的复杂化，建议拆分。 ↩