1. 网格¶
有接触过前端的应当知道 Grid 网页布局，而 Sphinx Design 插件能够实现相同的效果。（所以它才能称之为响应式的 Web 组件）。
网格是基于12列系统，它可以适应观看屏幕的大小。
网格指令可以设置默认列数(1到12);对所有屏幕尺寸使用单个数字，或对 extra-small(<576px)、 small (768px)、 medium(992px)和 large screens(>1200px)使用四个数字，然后为每个项目设置子网格项指令。
网格有三种指令，分别为 gird、 grid-item、 grid-item-card。
1.1. gird option¶
- gutter
Spacing between items. One or four integers (for “xs sm md lg”) between 0 and 5.
间距的物品。0到5之间的一个或四个整数(对于“xs sm md lg”)。
- margin
Outer margin of grid. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
网格的外缘。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5、auto。
- padding
Inner padding of grid. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5.
网格的内填充。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5。
- outline
Create a border around the grid.
在网格周围创建一个边界。
- reverse
Reverse the order of the grid items.
颠倒网格项的顺序。
- class-container
Additional CSS classes for the grid container element.
网格容器元素的其他CSS类。
- class-row
Additional CSS classes for the grid row element.
用于网格行元素的其他CSS类。
1.2. grid-item option¶
- columns
The number of columns (out of 12) a grid-item will take up. One or four integers (for “xs sm md lg”) between 1 and 12 (or auto to adapt to the content).
网格项所占的列数(12个列中)。1到12之间的一个或四个整数(对于“xs sm md lg”)(或自动以适应内容)。
- margin
Outer margin of grid item. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
网格项的外部边界。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5、auto。
- padding
Inner padding of grid item. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5.
网格项的内部填充。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5。
- child-direction
Direction of children in the grid item: column (default) or row.
网格项中的子元素方向:列(默认)或行。
- child-align
Alignment of children, along the child-direction: start (default), end, center, justify or spaced.
子元素沿子元素方向的对齐:开始(默认)、结束、居中、对齐或间隔。
- outline
Create a border around the grid item.
在网格项周围创建一个边框。
- class
Additional CSS classes for the grid item element.
网格项元素的其他CSS类。
1.3. grid-item-card option¶
- columns
The number of columns (out of 12) a grid-item will take up. One or four integers (for “xs sm md lg”) between 1 and 12 (or auto to adapt to the content).
网格项所占的列数(12个列中)。1到12之间的一个或四个整数(对于“xs sm md lg”)(或自动以适应内容)。
- margin
Outer margin of grid item. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
网格项的外部边界。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5、auto。
- padding
Inner padding of grid item. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5.
网格项的内部填充。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5。
- class-item
Additional CSS classes for the grid item element.
网格项元素的其他CSS类。
1.4. 实例应用¶
1.4.1. 简单示例¶
A
B
C
D
Syntax
::::{grid} 4
:outline:
:::{grid-item}
A
:::
:::{grid-item}
B
:::
:::{grid-item}
C
:::
:::{grid-item}
D
:::
::::
.. grid:: 4
:outline:
.. grid-item::
A
.. grid-item::
B
.. grid-item::
C
.. grid-item::
D
1.4.2. 卡片网格的简单示例¶
A
B
Syntax
::::{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
1.4.3. 控制网格子项的间距¶
A
B
A
B
Syntax
::::{grid} 2
:gutter: 1
:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::
::::{grid} 2
:gutter: 5
:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::
.. grid:: 2
:gutter: 1
.. grid-item-card::
A
.. grid-item-card::
B
.. grid:: 2
:gutter: 5
.. grid-item-card::
A
.. grid-item-card::
B
1.4.4. 网格子项级列宽度¶
您可以使用grid-item指令的columns选项来覆盖单个条目所占的列数。假设总列为12，这意味着12表示一个条目占了整个网格行，即6 / 2。或者，使用auto可以根据项目内容自动决定使用多少列。与网格列一样，对于小、中、大和超大屏幕，您可以提供单个数字，也可以提供4个数字。
A
B
C
Syntax
::::{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
备注
在此语法中，如果选项的值只接受一个，如果出现如 :columns: 12 6 6 6 的情况，这是因为它可以根据屏幕的大小（四种屏幕）来调整占据的列数。