ion-grid
该网格是一个强大的以移动优先为设计理念的 Flexbox 系统，用于构建自定义布局。它由三个单元组成——网格、行和列。列会扩展以填充行，并会根据额外列的增加而调整大小。它基于 12 列布局，并根据屏幕尺寸设置不同的断点。列的数量可以使用 CSS 自定义。
🌐 The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, row(s) and column(s). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
概述
🌐 Overview
- 网格充当所有行和列的容器。网格占据其容器的全宽，但添加
fixed属性将根据屏幕尺寸设置宽度，见下面的 固定网格。 - 行是水平排列的列组，它们正确排列。
- 内容应放置在列内，并且只有列可以是行的直接子级。
size属性指示每行默认 12 列中要使用的列数。因此，可以将size="4"添加到列中，以占用网格的三分之一，即 12 列中的 4 列。- 没有指定大小的列将自动具有相等的宽度。例如，四列每列将自动宽度为25%.
- 列宽设置为百分比，因此它们始终相对于其父元素是可变的和大小的。
- 各列之间有间距。然而，可以通过将
ion-no-padding类添加到网格中来移除网格和列之间的间距。有关可应用于网格的更多样式，请参阅 CSS 实用工具。 - 有五个网格级别，每个响应断点对应一个：所有断点（超小）、小、中、大和超大。
- 网格层级是基于最小宽度的，这意味着它们适用于其层级以及所有比它更大的层级（例如，
size-sm="4"适用于小型、中型、大型和超大型设备）。 - 网格可以通过 CSS 变量进行自定义。请参阅 自定义网格。
默认断点
🌐 Default Breakpoints
网格的默认断点及相应的属性在下表中定义。目前，断点值无法自定义。有关为什么不能自定义的更多信息，请参阅 媒体查询中的变量。
🌐 The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see Variables in Media Queries.
| 名称 | 值 | 宽度属性 | 偏移属性 | 推移属性 | 拉取属性 | 描述 |
|---|---|---|---|---|---|---|
| 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) 设置列 |
基本用法
🌐 Basic Usage
默认情况下，对于所有设备和屏幕尺寸，列将在行内占据相同的宽度。
🌐 By default, columns will take up equal width inside of a row for all devices and screen sizes.
固定网格
🌐 Fixed Grid
网格占据其容器的100%宽度。通过向网格添加 fixed 属性，宽度将根据屏幕大小进行设置。每个断点的网格宽度在下表中列出，但可以自定义。更多信息，请参见 自定义网格。在 StackBlitz 中打开下面的示例并调整屏幕大小以查看网格宽度变化。
🌐 Grids take up 100% width of their container. By adding the fixed property to the grid, the width will be set based on the screen size. The width of the grid for each breakpoint is listed in the table below, but it can be customized. For more information, see Customizing the Grid. Open the below example in StackBlitz and resize the screen to see the grid width change.
| 名称 | 值 | 描述 |
|---|---|---|
| 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 |
列尺寸
🌐 Column Size
列可以设置为特定的大小，以占用总列数中的某一部分，或者根据内容调整其宽度。默认列数为12，但可以自定义。有关更多信息，请参阅下面的 列数 部分。
🌐 Columns can be set to specific sizes to take up a certain number out of the total number of columns, or resize their width based on the content. The default number of columns is 12, but this can be customized. See the Number of Columns section below for more information.
基于内容的大小
🌐 Content-based size
通过将 size 设置为 "auto"，该列可以根据其内容的自然宽度自动调整大小。当将列设置为绝对宽度（例如特定像素数）时，这是必要的。自动宽度列旁边的列将调整大小以填充行。
🌐 By setting the size to "auto" the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row.
指定尺寸
🌐 Specified size
设置一列的 size，其他列将自动围绕它调整大小。如果对所有列指定了大小，但总和不等于列总数，列之后会有空白空间。
🌐 Set the size of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns.
响应式尺寸
🌐 Responsive size
size 属性将更改所有 断点 的列宽。列还提供了几个大小属性，这些属性在“size”末尾附加了断点名称。可以使用这些属性根据屏幕大小更改列的宽度。在下面的 StackBlitz 示例中打开，并调整屏幕大小以查看列宽的变化。
🌐 The size property will change the column width for all breakpoints. Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column widths change.
列偏移
🌐 Column Offset
列可以偏移以向右移动总列数中的一定列数。
🌐 Columns can be offset to shift to the right by a certain number of columns out of the total number of columns.
指定偏移量
🌐 Specified offset
可以使用 offset 属性将列向右移动。此属性通过指定的列数增加列的左边距。如果右侧存在其他列，它也会将这些列向右移动。
🌐 Columns can be moved to the right by using the offset property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.
响应偏移
🌐 Responsive offset
offset 属性将更改所有 断点 的列左边距。列还提供了几个在断点名称后附加“offset”的偏移属性。可以使用这些属性根据屏幕大小更改列的偏移。在下面的 StackBlitz 示例中打开，并调整屏幕大小以查看列的偏移变化。
🌐 The offset property will change the column's left margin for all breakpoints. Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column offsets change.
列推拉
🌐 Column Push & Pull
可以将列向右推或向左拉总列数中的一定数量的列。
🌐 Columns can be pushed to to the right or pulled to the left by a certain number of columns out of the total number of columns.
指定推拉
🌐 Specified push & pull
通过添加 push 和 pull 属性重新排序列。这些属性通过指定的列数调整列的 left 和 right，使重新排序列变得容易。如果列被移到另一列所在的位置，这将导致列重叠。
🌐 Reorder the columns by adding the push and pull properties. These properties adjust the left and right of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned.
响应式推拉
🌐 Responsive push & pull
push 和 pull 属性将改变所有 断点 的列位置。列还提供了若干 push 和 pull 属性，并在“push”/“pull”的末尾附加断点名称。这些属性可用于根据屏幕大小更改列的位置。在 StackBlitz 中打开以下示例，并调整屏幕大小以查看列位置变化。
🌐 The push and pull properties will change the column's position for all breakpoints. Column also provides several push and pull properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column positions change.
对齐
🌐 Alignment
垂直对齐
🌐 Vertical Alignment
通过向行添加不同的类，所有列都可以在行内部垂直对齐。有关可用类的列表，请参见 CSS 工具。
🌐 All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see css utilities.
水平对齐
🌐 Horizontal Alignment
通过向行添加不同的类，所有列都可以在行内部水平对齐。有关可用类的列表，请参见 css 工具。
🌐 All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see css utilities.
自定义网格
🌐 Customizing the Grid
使用我们内置的 CSS 变量，可以自定义预定义的网格属性。更改填充的值、列数等。
🌐 Using our built-in CSS variables, it’s possible to customize the predefined grid attributes. Change the values of the padding, the number of columns, and more.
固定宽度
🌐 Fixed Width
固定网格的宽度可以通过 --ion-grid-width CSS 变量为所有断点设置。要覆盖单个断点，请使用 --ion-grid-width-{breakpoint} CSS 变量。每个断点的默认值可以在 固定网格 部分找到。在 StackBlitz 中打开下面的示例并调整屏幕大小以查看网格宽度的变化。
🌐 The width of a fixed grid can be set for all breakpoints with the --ion-grid-width CSS variable. To override individual breakpoints, use the --ion-grid-width-{breakpoint} CSS variables. The default value for each of the breakpoints can be found in the Fixed Grid section. Open the below example in StackBlitz and resize the screen to see the grid width change.
列数
🌐 Number of Columns
网格列的数量可以通过 --ion-grid-columns CSS 变量进行修改。默认情况下有 12 列网格，但可以将其更改为任何正整数，并用于计算每个单独列的宽度。
🌐 The number of grid columns can be modified with the --ion-grid-columns CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.
填充
🌐 Padding
网格容器的内边距可以通过 --ion-grid-padding CSS 变量为所有断点设置。要覆盖单个断点，请使用 --ion-grid-padding-{breakpoint} CSS 变量。
🌐 The padding on the grid container can be set for all breakpoints with the --ion-grid-padding CSS variable. To override individual breakpoints, use the --ion-grid-padding-{breakpoint} CSS variables.
列的内边距可以通过 --ion-grid-column-padding CSS 变量为所有断点设置。要覆盖单个断点，请使用 --ion-grid-column-padding-{breakpoint} CSS 变量。
🌐 The padding on the columns can be set for all breakpoints with the --ion-grid-column-padding CSS variable. To override individual breakpoints, use the --ion-grid-column-padding-{breakpoint} CSS variables.
属性
🌐 Properties
fixed
| Description | If true, the grid will have a fixed width based on the screen size. |
| Attribute | fixed |
| Type | boolean |
| Default | false |
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
🌐 CSS Custom Properties
| 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 |
插槽
🌐 Slots
No slots available for this component.