5分钟掌握Grid布局【多图示例】

• 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模拟三遍关键字，嗯。。名字真怪