ion-grid

shadow

网格是一个强大的移动优先 Flexbox 系统，用于构建自定义布局。它由三个单元组成 - 网格、row(s) 和 column(s)。列将扩展以填充行，并将调整大小以适应其他列。它基于 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 属性将根据屏幕尺寸设置宽度，请参见下面的 固定网格。

  ¥Grids act as a container for all rows and columns. Grids take up the full width of their container, but adding the fixed property will set the width based on the screen size, see Fixed Grid below.

• 行是水平排列的列组，它们正确排列。

  ¥Rows are horizontal groups of columns that line the columns up properly.

• 内容应放置在列内，并且只有列可以是行的直接子级。

  ¥Content should be placed within columns, and only columns may be immediate children of rows.

• size 属性指示要使用的列数（默认每行 12 列）。因此，size="4" 可以添加到一列中，以占据网格的 1/3，或 12 列中的 4 个。

  ¥The size property indicates the number of columns to use out of the default 12 per row. So, size="4" can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.

• 没有尺寸值的列将自动具有相等的宽度。例如，四列的宽度将自动变为 25%。

  ¥Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide.

• 列宽设置为百分比，因此它们始终相对于其父元素是可变的和大小的。

  ¥Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.

• 各个列之间有填充。但是，可以通过将 ion-no-padding 类添加到网格来从网格和列中删除填充。有关可应用于网格的更多样式，请参阅 CSS 实用工具。

  ¥There is padding between individual columns. However, the padding can be removed from the grid and columns by adding the ion-no-padding class to the grid. See the CSS Utilities for more styles that can be applied to the grid.

• 有五个网格层，每个响应断点对应一个网格层：所有断点（超小）、小、中、大和特大。

  ¥There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.

• 网格层基于最小宽度，这意味着它们适用于其层以及所有大于它们的层（例如，size-sm="4" 适用于小型、中型、大型和超大型设备）。

  ¥Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., size-sm="4" applies to small, medium, large, and extra large devices).

• 网格可以通过 CSS 变量进行自定义。参见 自定义网格。

  ¥Grids can be customized via CSS variables. See Customizing the Grid.

默认断点

¥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	当（最小宽度：0）时设置列
sm	576 像素	sizeSm	offsetSm	pushSm	pullSm	设置列时（最小宽度：576px）
md	768 像素	sizeMd	offsetMd	pushMd	pullMd	设置列时（最小宽度：768px）
lg	992 像素	sizeLg	offsetLg	pushLg	pullLg	当（最小宽度：992px）时设置列
xl	1200 像素	sizeXl	offsetXl	pushXl	pullXl	当（最小宽度：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	540 像素	当（min-width：576px）时将网格宽度设置为 540px
md	720 像素	当（min-width：768px）时将网格宽度设置为 720px
lg	960 像素	当（min-width：992px）时将网格宽度设置为 960px
xl	1140 像素	当(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 属性将更改所有 breakpoints 的列宽。Column 还提供了几个大小属性，断点名称附加到 "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 属性将更改所有 breakpoints 的列的左边距。Column 还提供了几个偏移属性，断点名称附加到 "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 属性将更改所有 breakpoints 的列位置。Column 还提供了多个 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.