ion-grid
网格是一个强大的移动优先 flexbox 系统，用于构建自定义布局。它由三个单元组成 —— 网格、行和列。列将扩展以填满行，并将调整大小以适应更多列。它基于 12 列布局，根据屏幕大小有不同的断点。列数可以使用 CSS 自定义。
概述
- 网格充当所有行和列的容器。网格占据其容器的全部宽度，但添加
fixed属性将根据屏幕大小设置宽度，请参阅下面的固定网格。 - 行是列的水平分组，使列正确对齐。
- 内容应放置在列内，只有列可以是行的直接子元素。
size属性指示在默认每行 12 列中使用的列数。因此，可以向列添加size="4"以占据网格的 1/3（即 12 列中的 4 列）。- 没有 size 值的列将自动具有相等的宽度。例如，四列将各自动占 25% 的宽度。
- 列宽以百分比设置，因此它们始终是流式的，并相对于其父元素调整大小。
- 各个列之间有内边距。但是，可以通过向网格添加
ion-no-padding类来移除网格和列的内边距。请参阅CSS 实用工具了解可应用于网格的更多样式。 - 有五个网格层级，每个对应一个响应式断点：所有断点（超小）、小、中、大和超大。
- 网格层级基于最小宽度，意味着它们适用于自己的层级和所有更大的层级（例如，
size-sm="4"适用于小、中、大和超大设备）。 - 可以通过 CSS 变量自定义网格。请参阅自定义网格。
默认断点
网格的默认断点和相应属性定义在下表中。当前无法自定义断点值。有关为何无法自定义的更多信息，请参阅媒体查询中的变量。
| 名称 | 值 | 宽度属性 | 偏移属性 | 推属性 | 拉属性 | 描述 |
|---|---|---|---|---|---|---|
| xs | 0 | size | offset | push | pull | 当 (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 属性将为所有断点更改列的位置。Column 还提供了几个在 "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
| 说明 | If true, the grid will have a fixed width based on the screen size. |
| 属性 | fixed |
| 类型 | boolean |
| 默认值 | false |
事件
该组件没有可用的事件。
方法
该组件没有可用的公共方法。
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
| Name | 说明 |
|---|---|
--ion-grid-padding | Padding for the Grid |
--ion-grid-padding-lg | Padding for the Grid on lg screens |
--ion-grid-padding-md | Padding for the Grid on md screens |
--ion-grid-padding-sm | Padding for the Grid on sm screens |
--ion-grid-padding-xl | Padding for the Grid on xl screens |
--ion-grid-padding-xs | Padding for the Grid on xs screens |
--ion-grid-width | Width of the fixed Grid |
--ion-grid-width-lg | Width of the fixed Grid on lg screens |
--ion-grid-width-md | Width of the fixed Grid on md screens |
--ion-grid-width-sm | Width of the fixed Grid on sm screens |
--ion-grid-width-xl | Width of the fixed Grid on xl screens |
--ion-grid-width-xs | Width of the fixed Grid on xs screens |
插槽
该组件没有可用的插槽。