CSS3 grid 网格/栅格布局
grid 网格/栅格布局
网格布局有一个父元素和一些子元素组成
设置grid布局 设置在父元素身上
display:grid;
display:inline-grid;
grid-template 设置网格轨道 就是设置网格的行数列数 设置在父元素身上
grid-template-columns: 10px 10px 10px;
grid-template-rows: 10px 10px 10px;
grid-gap 设置网格轨道之间的间隙 设置在父元素上
grid-column-gap:10px;
grid-row-gap:10px;
grid-gap: 10px;
grid-gap: 10px 20px;
grid-column 设置网格子元素的占行列宽高的大小 设置在子元素上
- 线是指网格布局 grid-template 设置好后，每个单元格周围的边。
- 就比如 3X3布局，行线 列线都是4条。
grid-column:1/3;
grid-row:1/3;
justify-self 设置子元素网格项水平对齐的方式 设置在子元素上
justify-self: stretch;
justify-self:start;
justify-self:center;
justify-self:end;
align-self 设置子元素网格项垂直对齐的方式 设置在子元素上
align-self: stretch;
align-self:start;
align-self:center;
align-self:end;
justify-items 设置所有网格元素水平对齐方式 设置在父元素上。
- 属性值跟justify-self的属性值一样。
justify-items:center;
align-items 设置所有网格元素垂直对齐方式 设置在父元素上
- 属性值跟align-self的属性值一样。
align-items:center;
grid-template-areas 将单元格每个部分都起一个名字进行区域划分。 设置在父元素上
就比如
grid-template-areas:
"header header header"
"advert content content"
"advert footer footer";
这样就表示这个3X3的网格中名为 header 占了头部的三格。
grid-area 给子元素网格项进行设置名字，把他的名字与之前设定的grid-template-areas进行设定。
就比如
grid-area:header;
当前元素就是名为header的子元素网格项，占了之前制定的网格头部三格。
grid-area还有一个书写方法，grid-area:1/2/3/4:这里的4个数字依次分别代表 第 1 条水平网格线（起始）、第 2 条垂直网格线（起始）、第 3 条水平网格线（终止）、第 4 条垂直网格线（终止）。
网格布局单位:
绝对单位
px
相对单位
em%vwvhfrauto
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);
在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。
repeat(auto-fill, minmax(60px, 1fr));
在第一个网格中，请使用 auto-fill 和 repeat 来填充网格。 其中列宽的最小值为 60px，最大值为 1fr。 你可以调整最右侧的预览区大小，查看自动填充的效果。
auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。## grid 网格/栅格布局
网格布局有一个父元素和一些子元素组成
设置grid布局 设置在父元素身上
display:grid;
display:inline-grid;
grid-template 设置网格轨道 就是设置网格的行数列数 设置在父元素身上
grid-template-columns: 10px 10px 10px;
grid-template-rows: 10px 10px 10px;
grid-gap 设置网格轨道之间的间隙 设置在父元素上
grid-column-gap:10px;
grid-row-gap:10px;
grid-gap: 10px;
grid-gap: 10px 20px;
grid-column 设置网格子元素的占行列宽高的大小 设置在子元素上
- 线是指网格布局 grid-template 设置好后，每个单元格周围的边。
- 就比如 3X3布局，行线 列线都是4条。
grid-column:1/3;
grid-row:1/3;
justify-self 设置子元素网格项水平对齐的方式 设置在子元素上
justify-self: stretch;
justify-self:start;
justify-self:center;
justify-self:end;
align-self 设置子元素网格项垂直对齐的方式 设置在子元素上
align-self: stretch;
align-self:start;
align-self:center;
align-self:end;
justify-items 设置所有网格元素水平对齐方式 设置在父元素上。
- 属性值跟justify-self的属性值一样。
justify-items:center;
align-items 设置所有网格元素垂直对齐方式 设置在父元素上
- 属性值跟align-self的属性值一样。
align-items:center;
grid-template-areas 将单元格每个部分都起一个名字进行区域划分。 设置在父元素上
就比如
grid-template-areas:
"header header header"
"advert content content"
"advert footer footer";
这样就表示这个3X3的网格中名为 header 占了头部的三格。
grid-area 给子元素网格项进行设置名字，把他的名字与之前设定的grid-template-areas进行设定。
就比如
grid-area:header;
当前元素就是名为header的子元素网格项，占了之前制定的网格头部三格。
grid-area还有一个书写方法，grid-area:1/2/3/4:这里的4个数字依次分别代表 第 1 条水平网格线（起始）、第 2 条垂直网格线（起始）、第 3 条水平网格线（终止）、第 4 条垂直网格线（终止）。
网格布局单位:
绝对单位
px
相对单位
em%vwvhfrauto
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);
在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。
repeat(auto-fill, minmax(60px, 1fr));
在第一个网格中，请使用 auto-fill 和 repeat 来填充网格。 其中列宽的最小值为 60px，最大值为 1fr。 你可以调整最右侧的预览区大小，查看自动填充的效果。
auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。