css Grid 布局

css Grid布局：什么是网格布局 

css Grid布局： 浏览器开启css Grid Layout

css Grid布局：网格单元格布局

css Grid布局： 合并单元格布局  -- 例子有些属性支持的不好，有些可以优化，请自行思考解决

css Grid布局： 显示和隐式网格线  

css Grid布局： 网格区域

css Grid布局： 独立源与网格的层叠顺序

css Grid布局： 网格的流动

Grid布局指南

css Grid 系列(上) - Grid布局完整指南

css Grid 系列(下) - 使用Grid布局构建网站首页

1、单元格的布局

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column: start / end

grid-row: start / end

2、网格区域

grid-area: row-start / column-start / row-end / column-end

3、在CSS Grid Layout中具有独立的源（文档流），实现任何布局效果，完全不需要考虑文档流结构的先后顺序，

只需要根据设计需求，调整网格单元格位置。

4、在CSS Grid Layout中盒模型大小计算变成：

容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width

5、grid-auto-flow 默认row，设置为column时，网格中的单元将会按列显示。

6、

grid-gap: <grid-row-gap> <grid-column-gap>

                如果只设置一个值，那么grid-column-gap 和 grid-row-gap都为那个值

 justify-items: start | end | center | stretch（默认） ;

垂直于列网格线对齐，适用于网格容器里的所有网格项。
属性值：
start: 左对齐。
end: 右对齐。
center: 居中对齐。

stretch: 填满（默认）。

align-items: start | end | center | stretch ;
垂直于行网格线对齐，适用于网格容器里的所有网格项。
属性值：
start： 顶部对齐。
end： 底部对齐。
center： 居中对齐。
stretch：填满（默认）。