css 网格布局完全指南，查看翻译原文地址

• 参考：
  • CSS GRID LEVEL1 from W3C
  • CSS Grid Layout from MDN

• 基础

• 教程（1）网格容器

• 教程（2）网格项

• 难点和重点

  • 不可见网格(隐式网格)
  • fr单位
  • column, float, clear, vertical-align等属性在网格中不产生效果
  • 网格间隙不等同于margin, padding
  • justify-水平对齐，align-垂直对齐

• 网格布局（Grid）：由网格容器和网格项组合而成的现代CSS布局形式。
• 网格容器（Grid Container）：设置display:grid的元素，所有网格项（Grid Items）的直属父级元素。网格容器中的子元素也可以为网格容器——嵌套网格布局。
• 网格项（Grid Items）：网格容器的直接子元素（直属后代元素），一旦直属父元素设置为grid布局，那么这个父元素的子元素自动为网格项。
• 网格分隔线（Grid Items）：组成网格基本结构的分隔线。分隔线可以是垂直的（列分隔线），也可以是水平的（行分隔线）。
• 网格单元（Grid Items）：由两个相邻行分隔线和列分隔线交汇出的区域。当执行网格项定位的时候，网格项引用的最小网格单位（注：网格布局中的逻辑概念，实际中并不使用）。
• 网格轨道（Grid Track）：网格单元的一种逻辑布局形式，表示网格中的一行或者一列，其前身是Grid Column和Grid row。
• 网格区域（Grid Area）：网格单元的一种逻辑布局形式，指定网格分隔线包围起来的区域，包含一个或多个连续相邻的网格单元。

这里给出的是css属性表，不是值，不要搞错了。

• display
• grid
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• justify-items
• justify-content
• align-items
• align-content

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self