网格

9.2. 网格#

有接触过前端的应当知道 Grid 网页布局，而 Sphinx Design 插件能够实现相同的效果。（所以它才能称之为响应式的 Web 组件）。

网格是基于12列系统，它可以适应观看屏幕的大小。

网格指令可以设置默认列数(1到12);对所有屏幕尺寸使用单个数字，或对 extra-small(<576px)、 small (768px)、 medium(992px)和 large screens(>1200px)使用四个数字，然后为每个项目设置子网格项指令。

网格有三种指令，分别为 gird、 grid-item、 grid-item-card。

9.2.1. gird option#

9.2.2. grid-item option#

9.2.3. grid-item-card option#

9.2.4. 实例应用#

简单示例#

A

B

C

D

Syntax

卡片网格的简单示例#

Title 1

A

Title 2

B

Syntax

控制网格子项的间距#

A

B

A

B

Syntax

网格子项级列宽度#

您可以使用grid-item指令的columns选项来覆盖单个条目所占的列数。假设总列为12，这意味着12表示一个条目占了整个网格行，即6 / 2。或者，使用auto可以根据项目内容自动决定使用多少列。与网格列一样，对于小、中、大和超大屏幕，您可以提供单个数字，也可以提供4个数字。

A

B

C

Syntax

备注

在此语法中，如果选项的值只接受一个，如果出现如 :columns: 12 6 6 6 的情况，这是因为它可以根据屏幕的大小（四种屏幕）来调整占据的列数。

目录