正式的 p-grid 问题

p-grid 是 Polymer 元素的一种布局方式，可以将网格划分为行和列，并将元素放置在这些单元格中。

如何使用 p-grid？

使用 p-grid 非常简单。首先，引入 Polymer 和 p-grid 元素：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../p-grid/p-grid.html">

然后，在自己的元素中使用 p-grid：

<dom-module id="my-element">
  <template>
    <p-grid>
      <div>Cell 1</div>
      <div>Cell 2</div>
      <div>Cell 3</div>
      <div>Cell 4</div>
    </p-grid>
  </template>
</dom-module>

p-grid 将会将这四个 div 元素均匀地分布在该元素中。

如何设置网格的行和列？

p-grid 元素默认将整个元素分为 12 列。我们可以使用以下属性设置网格的行和列：

• columns：设置网格的列数，默认为 12；
• align：设置网格的垂直对其方式。有三个可选值：start、center 和 end；
• justify：设置网格的水平对其方式。有七个可选值：start、center、end、around、between、evenly 和 fit。

<p-grid columns="6" align="center" justify="around">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
</p-grid>

此例中，p-grid 将会将元素划分为 6 列，并使这六个 div 元素在中心对其。同时，它们之间的距离是相等的，即每一个 div 元素距离左右两边的宽度相等。

如何将元素放入单元格中？

p-grid 中的每一个单元格都可以通过指定元素的 col 和 row 属性进行访问。如果元素没有指定这些属性，则它将被插入到下一个可用的单元格中。

<p-grid columns="4">
  <div col="1" row="1">Cell 1</div>
  <div col="3" row="1">Cell 2</div>
  <div col="2" row="3">Cell 3</div>
  <div>Cell 4</div> <!-- 默认会被放在 (2, 2) 的位置 -->
</p-grid>

这将会将 Cell 1 和 Cell 2 分别放置在第一行的第一列和第三列，而将 Cell 3 放置在第三行的第二列。由于 Cell 4 没有 col 和 row 属性，它将被插入到下一个可用的单元格中，也就是第二行的第二列。

如何设置单元格的大小？

p-grid 中的每一个单元格初始的大小都是相等的，但我们可以通过 colspan 和 rowspan 属性来指定单元格的跨度，以达到调整大小的目的。

<p-grid columns="4">
  <div col="1" colspan="2" row="1">Cell 1</div>
  <div col="3" rowspan="2" row="1">Cell 2</div>
  <div col="1" row="3">Cell 3</div>
  <div>Cell 4</div>
</p-grid>

这将会将 Cell 1 放置在第一行的前两列，Cell 2 跨越第二行的前两列和第三行的第一列，Cell 3 放置在第三行的第一列，而 Cell 4 将被插入到下一个可用的单元格中（也就是第二行的第二列）。