grid布局适合场景(为什么很少人用grid布局)
grid布局
grid布局，阮一峰写的非常详细。
我就不献丑了。
我就大致总结一下
缺点：相对于display：flex兼容性不好，不兼容于ie内核；这个制约了它的使用；不过它的思想非常好，如果改进了兼容性这个问题。完全可以替代flex布局
display: grid 指定一个容器采用网格布局。
grid是设置容器的每列/每行的宽度/高度，划分成网格，排列item
grid-template-columns ：设置每列宽度
grid-template-rows ：设置每行高度
单位：绝对单位，也可以使用百分比。可以自适应
grid-auto-flow ：row（默认，先行后列）column（先列后行）
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
Grid 布局
Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是 一维布局 。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是 二维布局 。Grid 布局远比 Flex 布局强大。
display 布局
grid-template-columns 列
grid-template-rows 行
grid-template-areas 区域
grid-template 行 列 区域简写
grid-column-gap 列间隔
grid-row-gap 行间隔
grid-gap 简写
justify-items 项目内容横向排列方式
align-items 项目内容纵向排列方式
place-items 简写
justify-content 内容横向排列方式
align-content 内容纵向排列方式
place-content 简写
grid-auto-columns 隐式（多出来未定义的格子）列宽
grid-auto-rows 隐式（多出来未定义的格子）行高
grid-auto-flow 排列方式
grid 行 列 区域 隐式格子宽 隐式格子高 排列方式简写
grid-column-start 定位列线开始位置
grid-column-end 定位列线结束位置
grid-column 简写
grid-row-start 定位行线开始位置
grid-row-end 定位行线结束位置
grid-row 简写
grid-area 区域
justify-self 单个项目内容横向对其方式
align-self 单个项目内容纵向对其方式
place-self 简写
可以是以下单位：
grid-template 是 grid-template-rows ， grid-template-columns ， grid-template-areas 简写属性
grid-column-gap == column-gap
grid-row-gap == row-gap
grid-gap == gap
水平方向
垂直方向
简写方式
水平方向
垂直方向
简写方式
在一个声明中设置所有以下属性的简写： grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-rows , grid-auto-columns , 和 grid-auto-flow 。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。
grid-column-start | grid-column-end 列从第几根线开始，第几根线结束
grid-row-start | grid-row-end 行从第几根线开始，第几根线结束
grid-column | grid-row 简写
表示跨几行或几列
水平方向
垂直方向
简写方式
前端，能说说你对grid布局的理解吗？
grid布局是继flex布局之后最强大的布局方案，一定程度上集合了flex和table布局的优点。
grid将网页划分成网格，可以任意组合设置，并提供内置函数，变化出各种各样的布局。浏览器内置了各种复杂的布局方案，不需要像之前float，column，table那样繁琐，可以直接在CSS当中灵活设置。
grid可以看作是一种类似table的二维布局，有行和列，行列可以任意设置以适应实际布局需要。
grid默认为块级元素，设置为inline-grid则为行内元素。
