CSS-Grid-Complete-Guidance

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

• 参考：
  • CSS GRID LEVEL1 from W3C
  • CSS Grid Layout from MDN
  • 基础
• 教程（1）网格容器网格容器.md)

• 教程（2）网格项网格项.md)
• 难点和重点
  • 不可见网格(隐式网格)%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-auto-columns—grid-auto-rows)
  • fr单位%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-template-columns—grid-template-rows)
  • column, float, clear, vertical-align等属性在网格中不产生效果%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#display)
  • 网格间隙不等同于margin, padding%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-column-gap—grid-row-gap)
  • 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属性表，不是值，不要搞错了。

网格容器（Grid Container）

• display%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#display)
• grid%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid)
• grid-template-columns%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-template-columns—grid-template-rows)
• grid-template-rows%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-template-columns—grid-template-rows)
• grid-template-areas%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-template-areas)
• grid-template%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-template)
• grid-column-gap%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-column-gap—grid-row-gap)
• grid-row-gap%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-column-gap—grid-row-gap)
• grid-gap%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-gap)
• grid-auto-columns%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-auto-columns—grid-auto-rows)
• grid-auto-rows%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-auto-columns—grid-auto-rows)
• grid-auto-flow%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#grid-auto-flow)
• justify-items%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#justify-items)
• justify-content%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#justify-content)
• align-items%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#align-items)
• align-content%E7%BD%91%E6%A0%BC%E5%AE%B9%E5%99%A8.md#align-content)

  网格项（Grid Items）

• grid-column-start%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-column-start—grid-column-end-grid-row-start—grid-row-end)
• grid-column-end%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-column-start—grid-column-end-grid-row-start—grid-row-end)
• grid-row-start%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-column-start—grid-column-end-grid-row-start—grid-row-end)
• grid-row-end%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-column-start—grid-column-end-grid-row-start—grid-row-end)
• grid-column%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-column)
• grid-row%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-row)
• grid-area%E7%BD%91%E6%A0%BC%E9%A1%B9.md#grid-area)
• justify-self%E7%BD%91%E6%A0%BC%E9%A1%B9.md#justify-self)
• align-self%E7%BD%91%E6%A0%BC%E9%A1%B9.md#align-self)