- Grid布局一览
- 网格系统
- 生成网格系统:display:gird
- "画"一个网格出来: grid-template-columns/rows
- 圈地为王("画"一个元素):grid-column/row
- 可视化布局:grid-template-areas
- 给网格设置gap
- 富余空间管理
- 越界处理与grid-auto-columns
- 自动放置与grid-auto-flow
- 其它现象
- grid-item数>grid-cell数
- 行级元素设置为grid时
pre-notify
看完不会算我输!ლ(′◉❥◉`ლ)
Grid布局一览
大概看一下就好,下面我们会从头讲起。
其中内容部分的高度也可以不用
calc()
计算出的结果来表示而是使用auto
,只不过这样的话我们需要将.container
容器的height设置为100%。
网格系统
生成网格系统:display:gird
当给一个容器(我们称这样的容器为grid-container
)设置为display:gird
时其内部的直接子元素都会 转换为grid-item
。
grid-item类似于将一个元素block化,参考最初的那个栗子中的span元素。如果一个元素已经是block元素并且它自身带有margin等样式,那么这些样式会被保留。
"画"一个网格出来: grid-template-columns/rows
template template template模拟三遍关键字,嗯。。名字真怪