CSS Grid实现网格布局

学习网站:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
实例详解:https://www.sohu.com/a/115465158_488157
grid属性

1. grid属性是下列属性的缩写属性：

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

2. CSS语法

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

3. 实例

.grid-container {
 display: grid;
 grid: 150px / auto auto auto;
}

4. 属性值

grid-area属性

1. grid-area属性在网格布局中指定网格项的大小和位置，并且是以下属性的简写属性：

grid-row-start
grid-column-start
grid-row-end
grid-column-end

2. grid-area属性还可用于为网格项指定名称。然后，可以通过网格容器的grid-template-areas属性引用命名网格项 。
   
3. CSS语法

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

4. 实例

.item1 {
 grid-area: 2 / 1 / span 2 / span 3;
}

5. 属性值
   
   使用以上属性最终可以实现无规则标签的云排列，如下图