网格

简介

网格基于 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 类。

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