学习网站:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
实例详解:https://www.sohu.com/a/115465158_488157
grid属性
- grid属性是下列属性的缩写属性:
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
- 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;
- 实例
.grid-container {
display: grid;
grid: 150px / auto auto auto;
}
- 属性值
grid-area属性
- grid-area属性在网格布局中指定网格项的大小和位置,并且是以下属性的简写属性:
grid-row-start
grid-column-start
grid-row-end
grid-column-end
- grid-area属性还可用于为网格项指定名称。然后,可以通过网格容器的grid-template-areas属性引用命名网格项 。
- CSS语法
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
- 实例
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
- 属性值
使用以上属性最终可以实现无规则标签的云排列,如下图