Ionic - 网格

使用 Ionic 网格系统 非常简单。主要有两个 class：row 用于处理行，col 用于列。

你可以选择任意数量的列或行。它们都会自动调整大小以适应可用空间，尽管你可以根据需要更改这种行为。

注意 − 本教程中的所有示例都会为网格添加边框，以便以易于理解的方式显示。

简单网格

以下示例展示了如何使用 col 和 row class。我们将创建两行。第一行有五个列，第二行只有三个。请注意，第一行和第二行的列宽不同。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

上述代码将生成以下屏幕 −

列尺寸

有时你不希望列尺寸自动分配。在这种情况下，你可以选择 col 前缀后跟一个数字，该数字表示 row 宽度的百分比。这仅适用于指定了特定尺寸的列，其他列将调整以适应剩余可用空间。

在以下示例中，第一列将使用全宽的 50%，其他列将相应调整。

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

上述代码将生成以下屏幕 −

下表展示了 Ionic 网格系统提供的可用百分比选项 −

列百分比类名

水平和垂直定位

列可以从左侧进行偏移。对于特定尺寸的列，操作方式相同。这次前缀将是 col-offset，然后我们使用上表中显示的相同百分比数字。以下示例展示了如何将两行中的第二列偏移 25%。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>

上述代码将生成以下屏幕 −

您还可以在 row 内垂直对齐列。有三个可用的 class，分别是带有 col 前缀的 top、center 和 bottom class。以下代码展示了如何垂直放置两行中的前三列。

注意 − 在接下来的示例中，我们在 CSS 中添加了 .col {height: 120px}，以便向您展示列的垂直放置效果。

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
</div>

上述代码将生成以下屏幕 −

响应式 Grid

Ionic Grid 也可用于响应式布局。有三个可用的 class。responsive-sm class 在视口小于横屏手机时会将列折叠成单行。responsive-md class 在视口小于竖屏平板时应用。responsive-lg class 在视口小于横屏平板时应用。

以下示例后的第一张图片展示了 responsive-sm class 在移动设备上的效果，第二张图片展示了相同响应式 grid 在平板设备上的不同效果。

<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

移动设备 Grid 视图

平板设备 Grid 视图