网格

简介

网格基于 12 列系统，能够适应观看屏幕的大小。

grid 指令可以设置默认列数（1 到 12）；可以是适用于所有屏幕大小的单一数字，也可以是四个数字，分别用于超小屏幕（<576px）、小屏幕（768px）、中屏幕（992px）和大屏幕（>1200px），然后应为每个项目设置子 grid-item 指令。

尝试调整屏幕大小以查看列数的变化：

A

B

C

D

语法
::::{grid} 1 2 3 4
:outline:

:::{grid-item}
A
:::
:::{grid-item}
B
:::
:::{grid-item}
C
:::
:::{grid-item}
D
:::
::::

.. grid:: 1 2 3 4
    :outline:

    .. grid-item::

        A

    .. grid-item::

        B

    .. grid-item::

        C

    .. grid-item::

        D

您还可以使用 auto 值作为列宽，根据内容的自然宽度调整列的大小。

简短的文本内容

一些较长的文本内容

简短的文本内容

将卡片放置在网格中

grid-item-card 指令是将卡片内容容器放置在网格项中的简写形式（参见 Cards）。大多数 card 指令的选项也可以在这里使用：

Title 1

A

Title 2

B

语法
::::{grid} 2
:::{grid-item-card}  Title 1
A
:::
:::{grid-item-card}  Title 2
B
:::
::::

.. grid:: 2

    .. grid-item-card::  Title 1

        A

    .. grid-item-card::  Title 2

        B

控制项之间的间距

您可以使用 gutter 选项设置网格项之间的间距。与网格列类似，您可以提供单一数字，或者为小屏幕、中屏幕、大屏幕和超大屏幕提供四个数字。

A

B

A

B

语法
::::{grid} 2
:gutter: 1

:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::

::::{grid} 2
:gutter: 3 3 4 5

:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::

.. grid:: 2
    :gutter: 1

    .. grid-item-card::

        A

    .. grid-item-card::

        B

.. grid:: 2
    :gutter: 3 3 4 5

    .. grid-item-card::

        A

    .. grid-item-card::

        B

项目级别的列宽

您可以通过使用 grid-item 指令的 columns 选项来覆盖单个项占用的列数。假设总列数为 12，这意味着 12 表示单个项占据整个网格行，或者 6 表示一半。或者，使用 auto 根据项内容自动决定使用多少列。与网格列类似，您可以提供单一数字，或者为小屏幕、中屏幕、大屏幕和超大屏幕提供四个数字。

A

B

C

语法
::::{grid} 2
:::{grid-item-card}
:columns: auto

A
:::
:::{grid-item-card}
:columns: 12 6 6 6

B
:::
:::{grid-item-card}
:columns: 12

C
:::
::::

.. grid:: 2

    .. grid-item-card::
        :columns: auto

        A

    .. grid-item-card::
        :columns: 12 6 6 6

        B

    .. grid-item-card::
        :columns: 12

        C

反转项的顺序

使用 grid 指令的 reverse 选项来反转项的顺序。如果您希望某个项在大屏幕上位于右侧，但在小屏幕上位于顶部，这会很有用。

_images/ebp-logo.png

Some text

嵌套网格

网格可以嵌套在其他网格中，以创建复杂的自适应布局：

Item 1.1

Multi-line

content

Item 1.2

Content

Item 2.1

Content

Item 2.2

Content

Item 2.3

Content

语法
::::::{grid} 1 1 2 2
:gutter: 1

:::::{grid-item}

::::{grid} 1 1 1 1
:gutter: 1

:::{grid-item-card} Item 1.1

Multi-line

content

:::

:::{grid-item-card} Item 1.2

Content

:::

::::

:::::

:::::{grid-item}

::::{grid} 1 1 1 1
:gutter: 1

:::{grid-item-card} Item 2.1

Content

:::

:::{grid-item-card} Item 2.2

Content

:::

:::{grid-item-card} Item 2.3

Content

:::

::::

:::::

::::::

.. grid:: 1 1 2 2
    :gutter: 1

    .. grid-item::

        .. grid:: 1 1 1 1
            :gutter: 1

            .. grid-item-card:: Item 1.1

                Multi-line

                content

            .. grid-item-card:: Item 1.2

                Content

    .. grid-item::

        .. grid:: 1 1 1 1
            :gutter: 1

            .. grid-item-card:: Item 2.1

                Content

            .. grid-item-card:: Item 2.2

                Content

            .. grid-item-card:: Item 2.3

                Content

详情请参阅 Bootstrap 网格系统。

grid 选项

gutter

项之间的间距。一个或四个整数（用于 “xs sm md lg”），范围在 0 到 5 之间。

margin

网格的外边距。一个（全部）或四个（上、下、左、右）值，可选：0、1、2、3、4、5、auto。

padding

网格的内边距。一个（全部）或四个（上、下、左、右）值，可选：0、1、2、3、4、5。

outline

在网格周围创建边框。

reverse

反转网格项的顺序。

class-container

网格容器元素的附加 CSS 类。

class-row

网格行元素的附加 CSS 类。

grid-item 选项

columns

网格项将占用的列数（共 12 列）。一个或四个整数（用于“xs sm md lg”），范围在 1 到 12 之间（或使用 auto 以适应内容）。

margin

网格项的外边距。一个（全部）或四个（上、下、左、右）值，可选：0、1、2、3、4、5、auto。

padding

网格项的内边距。一个（全部）或四个（上、下、左、右）值，可选：0、1、2、3、4、5。

child-direction

网格项中子元素的方向：column （默认）或 row。

child-align

子元素沿 child-direction 的对齐方式：start （默认）、end、center、justify 或 spaced。

outline

在网格项周围创建边框。

class

网格项元素的附加 CSS 类。

grid-item-card 选项

columns

网格项将占用的列数（共 12 列）。一个或四个整数（用于“xs sm md lg”），范围在 1 到 12 之间（或使用 auto 以适应内容）。

margin

网格项的外边距。一个（全部）或四个（上、下、左、右）值，可选：0、1、2、3、4、5、auto。

padding

网格项的内边距。一个（全部）或四个（上、下、左、右）值，可选：0、1、2、3、4、5。

class-item

网格项元素的附加 CSS 类。

以及 card 选项 中的所有选项。