ion-grid
网格是一个强大的移动优先弹性盒子系统，用于构建自定义布局。它由三个单元组成：网格、行和列。列会扩展以填满行，并会调整大小以适应额外的列。它基于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属性将为所有断点更改列宽度。列还提供了几个以断点名附加到"size"末尾的尺寸属性。这些属性可用于根据屏幕尺寸更改列的宽度。在StackBlitz中打开以下示例并调整屏幕大小以查看列宽度变化。
列偏移
列可以通过在总列数中向右移动一定数量的列来进行偏移。
指定偏移
可以使用offset属性将列向右移动。此属性通过指定列数增加列的左边距。如果存在右侧的列，它也会将它们向右移动。
响应式偏移
offset属性将为所有断点更改列的左边距。列还提供了几个以断点名附加到"offset"末尾的偏移属性。这些属性可用于根据屏幕尺寸更改列的偏移。在StackBlitz中打开以下示例并调整屏幕大小以查看列偏移变化。
列推入与拉出
列可以通过在总列数中向右推入或向左拉出一定数量的列。
指定推入与拉出
通过添加push和pull属性来重新排序列。这些属性通过指定列数调整列的left和right，从而轻松重新排序列。如果列被移动到另一个列的位置，这将导致列重叠。
响应式推入与拉出
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
| Description | If true, the grid will have a fixed width based on the screen size. |
| Attribute | fixed |
| Type | boolean |
| Default | false |
事件
No events available for this component.
方法
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS自定义属性
| Name | Description |
|---|---|
--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 |
插槽
No slots available for this component.