Grid 布局

创建行和列

• grid-template-columns 属性定义每一列的列宽；

• grid-template-rows 属性定义每一行的行高；

下面是 grid-template-columns 和 grid-template-rows 的示例，表示创建一个 3 行 3 列的网格，每一列的宽度为 100px，每一行的高度为 100px。

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

在上面的示例中，100px 是一个重复的出现值，所以我们可以使用 repeat 函数来简化代码。它接收两个参数，第一个参数是重复的次数，第二个参数表示一组重复的列宽或行高。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

上面的代码表示，创建一个 3 行 3 列的网格，每一列的宽度为 100px，每一行的高度为 100px。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 100px 50px 100px);
  grid-template-rows: repeat(3, 100px);
}

上面的代码表示，创建一个 3 行 6 列的网格，效果如下

单元格自动填充网格

有些时候，单元格的大小是固定的，比如每个单元格的大小为100px * 100px，但是 Grid 容器的大小不确定，如果希望每一行或每一列尽可能显示多的单元格，这时可以使用 auto-fill 关键字自动填充。如果剩余的空间不足以显示一个单元格时，则会自动换行显示。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

例如当 Grid 容器一行足以显示 4 个单元格时，它会尽可能多的显示单元格，而不是我们之前设置好的 3 行 3 列。

auto-fill

除了 auto-fill 外，还有 auto-fit 关键字，auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。

fr 关键字

网格布局提供了 fr 关键字(fraction 的缩写，意为"片段")， 如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: repeat(2, 100px);
}

fr 也可以与绝对长度的单位结合使用，比如 1fr 50px 2fr 表示第二列的宽度为 50px，第三列的宽度是第一列宽度的 2 倍。

minmax()

minmax() 函数可以指定列宽或行高的最小值和最大值。它接受两个参数，分别为最小值和最大值。

.grid {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 2fr);
}

上看的代码中，minmax(100px,2fr) 表示宽度不小于 100px，不大于 3fr。

auto 关键字

auto 关键字表示由浏览器自己决定单元格的长度。

.grid {
  display: grid;
  grid-template-columns: 100px auto 100px;
}

上面的代码中，第二列的宽度基本是等于该单元格的最大宽度，除非单元格设置了 min-width，且这个值大于最大宽度。

单元格间距

• row-gap 属性设置行与行之间的间距；

• column-gap 属性设置列与列之间的间距；

• gap 属性是 row-gap 和 column-gap 的简写形式。

.grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

grid-auto-flow

划分好网格后，容器的字元素会按照顺序，自动放置在每一个网格，默认的放置顺序是”先行后列“，即先填满第一行，再开始放入第二行。这个顺序是由 grid-auto-flow 属性决定的。默认值为 row，也可以设为 column，放置顺序就会变成”先列后行“。

.grid {
  display: grid;
  grid-auto-flow: column;
}

grid-auto-flow 属性除了设置成 row 和 column 外，还可以设成 row dense 和 column dense。

• row dense 表示”先行后列“，但是尽量优先填满当前行，再填满下一行；

• column dense 表示”先列后行“，但是尽量优先填满当前列，再填满下一列。

单元格对齐方式

.grid {
  display: grid;
  justify-items: start | center | end | stretch;
  align-items: start | center | end | stretch;
}

• start 表示与网格对齐，起点对齐；

• center 表示与网格对齐，中心对齐；

• end 表示与网格对齐，终点对齐；

• stretch 表示拉伸，占满单元格（默认值）。

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: <align-items> <justify-items>;

单元格内容对齐方式

• justify-content 属性设置单元格内容的水平位置（左中右）；

• align-content 属性设置单元格内容的垂直位置（上中下）；

• place-content 属性是 justify-content 和 align-content 的简写形式。

.grid {
  display: grid;
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start 表示与网格对齐，起点对齐；

• center 表示与网格对齐，中心对齐；

• end 表示与网格对齐，终点对齐；

• stretch 表示拉伸，占满单元格（默认值）。

• space-around 表示每个单元格周围均匀分布；

• space-between 表示每个单元格之间均匀分布；

• space-evenly 表示每个单元格之间均匀分布，包括单元格与容器边缘的间距。

项目属性

项目位置

项目摆放的位置是可以通过以下属性指定，通过指定项目的四个边框，就可以将项目定位在哪根网格线。

• grid-column-start 属性设置单元格的列开始位置，可以是数字，也可以是网格线的名称；

• grid-column-end 属性设置单元格的列结束位置，可以是数字，也可以是网格线的名称；

• grid-row-start 属性设置单元格的行开始位置，可以是数字，也可以是网格线的名称；

• grid-row-end 属性设置单元格的行结束位置，可以是数字，也可以是网格线的名称；

.grid-item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

上面的代码指定，1号项目的左边是第二根垂直网格线，右边边框是第四根垂直网格线。因为我们只指定了左右边框，没有指定上下边框，所以上下会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

这个四个属性的值，处理指定为第几根网格线，还可以指定为网格线的名字。

这四个属性的值还可以使用 span 关键字，表示"跨越"，即左右边框（或上下边框）之间跨越多少根网格线。

.grid-item-1 {
  grid-column-start: span 2;
}

上面的代码表示，1号项目跨越两根垂直网格线。