11.9 CSS 网格排版上下文(Grid Formatting Context)

用于网格布局

GFC(Grid Formatting Contexts)网格排版上下文, 当把一个元素的display属性设置为grid或inline-grid的时候,我们说该元素使用了网格布局(grid layout)。 该元素将生成一个网格容器(grid container),网格容器将创建一个独立的渲染区域(也就是GFC)来绘制其中的内容。

GFC和BFC基本相同,只不过使用了网格布局(grid layout)而不是块布局(block layout):

  • GFC由网格容器(grid container)所建立。
  • 不受外部浮动影响。
  • 网格容器(grid container)的外边距不会和其内容的外边距合并。
  • 有些block布局中的属性不能用在GFC中,比如伪元素::first-line,::first-letter对网格容器无效,而float、vertical-align对网格项(grid item)无效。

Grid layout是CSS3引入的新兴而强大的页面布局技术,尚处于开发过程中,不过领先的浏览器已经支持其绝大部分特性,接下来的章节将详细介绍其语法和用途。