ion-grid
网格是一个强大的移动优先弹性盒系统，用于构建自定义布局。它由三个单元组成 - 网格、行(s) 和 列(s)。列将扩展以填充行，并将调整大小以适应其他列。它基于 12 列布局，根据屏幕尺寸设置不同的断点。列数可以使用 CSS 自定义。
概述
- 网格充当所有行和列的容器。网格占用其容器的全部宽度，但添加
fixed属性将根据屏幕尺寸设置宽度，请参见下面的 固定网格。 - 行是水平排列的列组，用于正确对齐列。
- 内容应放置在列中，并且只有列可以是行的直接子元素。
size属性表示要在每行默认 12 列中使用的列数。因此，可以将size="4"添加到列中，以占用网格的 1/3，或 12 列中的 4 列。- 没有 size 值的列将自动具有相等的宽度。例如，四列将自动各占 25% 的宽度。
- 列宽设置为百分比，因此它们始终是流体并相对于其父元素进行大小调整。
- 单个列之间有填充。但是，可以通过将
ion-no-padding类添加到网格中来从网格和列中删除填充。有关可以应用于网格的更多样式，请参见 CSS 实用程序。 - 有五个网格层级，每个响应式断点一个：所有断点（超小）、小、中、大、超大。
- 网格层级基于最小宽度，这意味着它们适用于它们自己的层级以及所有比它们大的层级（例如，
size-sm="4"应用于小、中、大、超大设备）。 - 网格可以通过 CSS 变量进行自定义。请参见 自定义网格。
默认断点
网格的默认断点及其对应属性在下面的表格中定义。断点值目前无法自定义。有关为什么它们不能自定义的更多信息，请参见 媒体查询中的变量。
| 名称 | 值 | 宽度属性 | 偏移属性 | 推属性 | 拉属性 | 描述 |
|---|---|---|---|---|---|---|
| xs | 0 | 大小 | 偏移 | 推动 | 拉动 | 在 (min-width: 0) 时设置列 |
| sm | 576px | sizeSm | offsetSm | pushSm | pullSm | 在 (min-width: 576px) 时设置列 |
| md | 768px | sizeMd | offsetMd | pushMd | pullMd | 在 (min-width: 768px) 时设置列 |
| lg | 992px | sizeLg | offsetLg | pushLg | pullLg | 在 (min-width: 992px) 时设置列 |
| xl | 1200px | sizeXl | offsetXl | pushXl | pullXl | 在 (min-width: 1200px) 时设置列 |
基本用法
默认情况下，列将占用所有设备和屏幕尺寸的行的等宽。
固定网格
网格占用其容器的 100% 宽度。通过将 fixed 属性添加到网格，宽度将根据屏幕尺寸设置。每个断点的网格宽度在下面的表格中列出，但可以自定义。有关更多信息，请参见 自定义网格。在 StackBlitz 中打开下面的示例并调整屏幕大小以查看网格宽度变化。
| 名称 | 值 | 描述 |
|---|---|---|
| xs | 100% | 对于 xs 屏幕，宽度为 100% |
| sm | 540px | 在 (min-width: 576px) 时将网格宽度设置为 540px |
| md | 720px | 在 (min-width: 768px) 时将网格宽度设置为 720px |
| lg | 960px | 在 (min-width: 992px) 时将网格宽度设置为 960px |
| xl | 1140px | 在 (min-width: 1200px) 时将网格宽度设置为 1140px |
列大小
列可以设置为特定大小，以占用总列数中的特定数量，或根据内容调整其宽度。默认列数为 12，但可以自定义。有关更多信息，请参见下面的 列数 部分。
基于内容的大小
通过将 size 设置为 "auto"，列可以根据其内容的自然宽度自行调整大小。在将列设置为绝对宽度（例如特定像素数）时，这是必需的。紧挨自动宽度列旁边的列将调整大小以填充行。
指定的大小
设置列的 size，其他列将自动围绕它调整大小。如果在所有列上都指定了大小，并且它们没有加起来达到总列数，则列之后将有空白。
响应式大小
size 属性将更改所有 断点 的列宽。Column 还提供了一些大小属性，在 "size" 的末尾附加了断点名称。这些属性可用于根据屏幕尺寸更改列的宽度。在 StackBlitz 中打开下面的示例并调整屏幕大小以查看列宽变化。
列偏移量
列可以偏移，以将它们向右移动特定数量的列，这些列来自总列数。
指定偏移量
可以使用 offset 属性将列向右移动。此属性将列的左外边距增加指定列数。它还会将右侧的列（如果有）向右移动。
响应式偏移量
offset 属性将更改所有 断点 的列的左外边距。Column 还提供了一些偏移量属性，在 "offset" 的末尾附加了断点名称。这些属性可用于根据屏幕尺寸更改列的偏移量。在 StackBlitz 中打开下面的示例并调整屏幕大小以查看列偏移量变化。
列推和拉
列可以向右推或向左拉，拉动的距离可以是总列数中的特定列数。
指定推拉
通过添加 push 和 pull 属性来重新排列列。这些属性会根据指定的列数调整列的 left 和 right，从而方便地重新排列列。如果列被移到另一个列所在的位置，就会导致列重叠。
响应式推拉
push 和 pull 属性会改变列在所有 断点上的位置。列还提供了一些 push 和 pull 属性，并在 "push" / "pull" 的末尾添加断点名称。这些属性可用于根据屏幕尺寸改变列的位置。在 StackBlitz 中打开下面的示例，并调整屏幕大小，以查看列位置的变化。
对齐
垂直对齐
可以通过向行添加不同的类来垂直对齐行中的所有列。有关可用类的列表，请参见 css 工具。
水平对齐
可以通过向行添加不同的类来水平对齐行中的所有列。有关可用类的列表，请参见 css 工具。
自定义网格
使用我们内置的 CSS 变量，可以自定义预定义的网格属性。可以更改填充、列数等的值。
固定宽度
可以使用 --ion-grid-width CSS 变量为所有断点设置固定网格的宽度。要覆盖单个断点，请使用 --ion-grid-width-{breakpoint} CSS 变量。每个断点的默认值可以在 固定网格 部分中找到。在 StackBlitz 中打开下面的示例，并调整屏幕大小，以查看网格宽度的变化。
列数
可以使用 --ion-grid-columns CSS 变量来修改网格列数。默认情况下有 12 列网格，但可以更改为任何正整数，并用于计算每列的宽度。
填充
可以使用 --ion-grid-padding CSS 变量为所有断点设置网格容器的填充。要覆盖单个断点，请使用 --ion-grid-padding-{breakpoint} CSS 变量。
可以使用 --ion-grid-column-padding CSS 变量为所有断点设置列的填充。要覆盖单个断点，请使用 --ion-grid-column-padding-{breakpoint} CSS 变量。
属性
fixed
| 描述 | 如果为 true，网格将根据屏幕尺寸具有固定宽度。 |
| 属性 | fixed |
| 类型 | boolean |
| 默认 | false |
事件
此组件没有可用的事件。
方法
此组件没有可用的公共方法。
CSS 阴影部分
此组件没有可用的 CSS 阴影部分。
CSS 自定义属性
| 名称 | 描述 |
|---|---|
--ion-grid-padding | 网格的填充 |
--ion-grid-padding-lg | 在 lg 屏幕上网格的填充 |
--ion-grid-padding-md | 在 md 屏幕上网格的填充 |
--ion-grid-padding-sm | 在 sm 屏幕上网格的填充 |
--ion-grid-padding-xl | 在 xl 屏幕上网格的填充 |
--ion-grid-padding-xs | 在 xs 屏幕上网格的填充 |
--ion-grid-width | 固定网格的宽度 |
--ion-grid-width-lg | 在 lg 屏幕上固定网格的宽度 |
--ion-grid-width-md | 在 md 屏幕上固定网格的宽度 |
--ion-grid-width-sm | 在 sm 屏幕上固定网格的宽度 |
--ion-grid-width-xl | 在 xl 屏幕上固定网格的宽度 |
--ion-grid-width-xs | 在 xs 屏幕上固定网格的宽度 |
插槽
此组件没有可用的插槽。