离子 - 网格

---

使用Ionic Grid System非常简单。有两个主要类 – row用于处理行，col用于处理列。

您可以选择任意数量的列或行。所有这些都会调整其大小以适应可用空间，尽管您可以更改此Behave以满足您的需求。

注意- 本教程中的所有示例都将边框应用于我们的网格，以便能够以易于理解的方式显示它。

简单网格

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

<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前缀，后跟代表行宽百分比的数字。这仅适用于应用了特定尺寸的列。其他列将根据剩余的可用空间进行调整。

在以下示例中，第一列将使用全宽度的 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>

上面的代码将产生以下屏幕 -

您还可以垂直对齐行内的列。可以使用三个类，即 - top、center和带有col前缀的bottom类。以下代码显示如何垂直放置两行的前三列。

注意- 在下面的示例中，我们将“.col {height: 120px}”添加到 CSS 中，以向您展示列的垂直放置。

<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>

上面的代码将产生以下屏幕 -

响应式网格

Ionic Grid 也可用于响应式布局。共有三门课程可供选择。当视口小于横向手机时，responsive-sm类会将列折叠成单行。当视口小于纵向平板电脑时，将应用responsive-md类。当视口小于横向平板电脑时，将应用responsive-lg类。

以下示例后的第一张图显示了responsive-sm类在移动设备上的外观，第二张图显示了相同的响应式网格在平板电脑设备上的不同外观。

<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>

移动网格视图

平板电脑网格视图