grid-area
该属性表示当前网格所占用的区域，可以被用作速记属性为 网格行启动，网格列启动，网格行截止和网格列截止的特性
语法：
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
可能取值：
- : 区域名称。由grid-template-areas属性创建。
- / / / : 占据网格区域的纵横起始位置。
eg:使“item1”上行线1和列线2开始，上行线4和列线3结束
.item1 { grid-area: 1 / 2 / 4 / 3; }
eg:使“item1”对行线1和列2号线和跨度2行跨度3列结束
.item1 { grid-area: 1 / 2 / span 2 / span 3; }
命名网格项目
grid-area属性也可以为网格项目Item命名
.item1 { // item1将被命名为“myArea” grid-area: myArea; } .grid-container { //item1跨越的3列网格布局所有3列： grid-template-areas: 'myArea myArea myArea'; }
.item1 { // item1将被命名为“myArea” grid-area: myArea; } .grid-container { //item1跨越的5列网格布局中的3列 grid-template-areas: 'myArea myArea myArea . . '; }
.item1 { grid-area: myArea; } .grid-container { // 让item1跨越两列和两行： grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .'; }
隐式网格
使用grid-auto-rows, grid-auto-columns, grid-auto-flow来设置隐式网格
- grid-auto-rows：隐含创建的网格行的大小
- grid-auto-columns：隐含创建的网格列的大小轨道
- grid-auto-flow：隐含创建的网格的默认流方向
.grid-container { display: grid; background-color: #2196F3; padding: 10px; grid-gap:5px; // 行高度70px grid-template-rows: 70px; // 2列铺满各站1半 grid-template-columns: repeat(2, 1fr); // 隐含创建的网格行的大小140px grid-auto-rows: 140px; // 隐含创建的网格的默认流方向: 行方向 grid-auto-flow: row; }
Grid属性集
| 作用在grid容器上 | 作用在grid子项上 |
| grid-template-columns（列宽） | grid-column-start |
| grid-template-rows（行高） | grid-column-end |
| grid-template-areas（命名网格） | grid-row-start |
| grid-template | grid-row-end |
| grid-column-gap（列间距） | grid-column |
| grid-row-gap | grid-row |
| grid-gap | grid-area |
| justify-items（水平呈现方式） | justify-self |
| align-items（垂直呈现方式） | align-self |
| place-items （水平垂直呈现方式） | place-self |
| justify-content（水平分布方式） | |
| align-content（垂直方向的分布方式） | |
| place-content | |
| grid-auto-columns（隐式创建列大小） | |
| grid-auto-rows | |
| grid-auto-flow | |
| grid（网格布局） |
Grid与Flex主要区别
- Grid布局则适用于更大规模的布局（二维布局）， 处理一些不规则和非对称的设计。
- Flexbox布局最适合应用程序的组件和小规模布局（一维布局）
虽然grid存在一定的兼容（如下图），但是依照flex的趋势，grid的时代必然会来
