栅格

简介

栅格基于 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 指令是在栅格项内放置卡片内容容器的简写形式（请参阅 卡片）。大多数 card 指令的选项也可用在此处

标题 1

A

标题 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

一些文本

嵌套栅格

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

项目 1.1

多行

内容

项目 1.2

内容

项目 2.1

内容

项目 2.2

内容

项目 2.3

内容

语法
::::::{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 类。

以及 卡片选项 中的所有选项。