CSS3 grid 网格/栅格布局

grid 网格/栅格布局

网格布局有一个父元素和一些子元素组成

设置grid布局 设置在父元素身上

display:grid;
display:inline-grid;
1
2
3

grid-template 设置网格轨道 就是设置网格的行数列数 设置在父元素身上

grid-template-columns: 10px 10px 10px;

grid-template-rows: 10px 10px 10px;

1
2
3
4
5

grid-gap 设置网格轨道之间的间隙 设置在父元素上

grid-column-gap:10px;

grid-row-gap:10px;

grid-gap: 10px;
  
  grid-gap: 10px 20px;
1
2
3
4
5
6
7
8

grid-column 设置网格子元素的占行列宽高的大小 设置在子元素上

• 线是指网格布局 grid-template 设置好后，每个单元格周围的边。
  • 就比如 3X3布局，行线 列线都是4条。

grid-column:1/3;

grid-row:1/3;
1
2
3
4

justify-self 设置子元素网格项水平对齐的方式 设置在子元素上

justify-self: stretch;

justify-self:start;

justify-self:center;

justify-self:end;
1
2
3
4
5
6
7
8

align-self 设置子元素网格项垂直对齐的方式 设置在子元素上

align-self: stretch;

align-self:start;

align-self:center;

align-self:end;
1
2
3
4
5
6
7
8

justify-items 设置所有网格元素水平对齐方式 设置在父元素上。

• 属性值跟justify-self的属性值一样。

justify-items:center;
1
2

align-items 设置所有网格元素垂直对齐方式 设置在父元素上

• 属性值跟align-self的属性值一样。

align-items:center;
1
2

grid-template-areas 将单元格每个部分都起一个名字进行区域划分。 设置在父元素上

就比如

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";
1
2
3
4

这样就表示这个3X3的网格中名为 header 占了头部的三格。

grid-area 给子元素网格项进行设置名字，把他的名字与之前设定的grid-template-areas进行设定。

就比如

grid-area:header;
1

当前元素就是名为header的子元素网格项，占了之前制定的网格头部三格。
grid-area还有一个书写方法，grid-area:1/2/3/4:

这里的4个数字依次分别代表 第 1 条水平网格线（起始）、第 2 条垂直网格线（起始）、第 3 条水平网格线（终止）、第 4 条垂直网格线（终止）。

网格布局单位:

绝对单位

px

相对单位

em % vw vh fr auto

fr :设置行或者列占剩余空间的比例。
auto:设置列宽或行高自动等于它的内容的宽度或高度

使用 repeat 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。

就比如grid-template-columns:repeat(100,100px);相当于分了100列，每一列都是100px。repeat(100,100px)第一个值是数量，第二个值是大小。

内置函数 minmax 也可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。
例如：

grid-template-columns: 100px minmax(50px, 200px);
1

在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。

repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

repeat(auto-fill, minmax(60px, 1fr));
1

在第一个网格中，请使用 auto-fill 和 repeat 来填充网格。 其中列宽的最小值为 60px，最大值为 1fr。 你可以调整最右侧的预览区大小，查看自动填充的效果。

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。## grid 网格/栅格布局
网格布局有一个父元素和一些子元素组成

设置grid布局 设置在父元素身上

display:grid;
display:inline-grid;
1
2
3

grid-template 设置网格轨道 就是设置网格的行数列数 设置在父元素身上

grid-template-columns: 10px 10px 10px;

grid-template-rows: 10px 10px 10px;

1
2
3
4
5

grid-gap 设置网格轨道之间的间隙 设置在父元素上

grid-column-gap:10px;

grid-row-gap:10px;

grid-gap: 10px;
  
  grid-gap: 10px 20px;
1
2
3
4
5
6
7
8

grid-column 设置网格子元素的占行列宽高的大小 设置在子元素上

• 线是指网格布局 grid-template 设置好后，每个单元格周围的边。
  • 就比如 3X3布局，行线 列线都是4条。

grid-column:1/3;

grid-row:1/3;
1
2
3
4

justify-self 设置子元素网格项水平对齐的方式 设置在子元素上

justify-self: stretch;

justify-self:start;

justify-self:center;

justify-self:end;
1
2
3
4
5
6
7
8

align-self 设置子元素网格项垂直对齐的方式 设置在子元素上

align-self: stretch;

align-self:start;

align-self:center;

align-self:end;
1
2
3
4
5
6
7
8

justify-items 设置所有网格元素水平对齐方式 设置在父元素上。

• 属性值跟justify-self的属性值一样。

justify-items:center;
1
2

align-items 设置所有网格元素垂直对齐方式 设置在父元素上

• 属性值跟align-self的属性值一样。

align-items:center;
1
2

grid-template-areas 将单元格每个部分都起一个名字进行区域划分。 设置在父元素上

就比如

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";
1
2
3
4

这样就表示这个3X3的网格中名为 header 占了头部的三格。

grid-area 给子元素网格项进行设置名字，把他的名字与之前设定的grid-template-areas进行设定。

就比如

grid-area:header;
1

当前元素就是名为header的子元素网格项，占了之前制定的网格头部三格。
grid-area还有一个书写方法，grid-area:1/2/3/4:

这里的4个数字依次分别代表 第 1 条水平网格线（起始）、第 2 条垂直网格线（起始）、第 3 条水平网格线（终止）、第 4 条垂直网格线（终止）。

网格布局单位:

绝对单位

px

相对单位

em % vw vh fr auto

fr :设置行或者列占剩余空间的比例。
auto:设置列宽或行高自动等于它的内容的宽度或高度

使用 repeat 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。

就比如grid-template-columns:repeat(100,100px);相当于分了100列，每一列都是100px。repeat(100,100px)第一个值是数量，第二个值是大小。

内置函数 minmax 也可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。
例如：

grid-template-columns: 100px minmax(50px, 200px);
1

在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。

repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

repeat(auto-fill, minmax(60px, 1fr));
1

在第一个网格中，请使用 auto-fill 和 repeat 来填充网格。 其中列宽的最小值为 60px，最大值为 1fr。 你可以调整最右侧的预览区大小，查看自动填充的效果。

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。