grid布局介绍

背景

CSS3及以前定义了五种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：

  • 块布局 ― 为了呈现文档而设计出来的布局模式。
  • 行内布局 ― 为了呈现文本而设计出来的布局模式。
  • 表格布局 ― 为了用格子呈现 2D 数据而设计出来的布局模式。
  • 定位布局 ― 为了非常直接地定位元素而设计出来的布局模式，定位元素基本与其他元素毫无关系。
  • 弹性盒子布局 ― 为了让容器能够改变子项的宽、高以及顺序，以最合适的方式填充可用空间的布局模式。

CSS3 Grid Layout（目前为 W3C —— 候选推荐规范）是一个新的模块，这个模块主要定义一个二维网格布局系统，用来优化用户界面设计。在这个网格布局模块中，网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中，因此谓之grid。

注：目前Grid布局暂时不能用于生产环境，因而还停留在研究阶段。但在今年（2017年）三月份，Grid布局将实装如Chrome浏览器进行测试。

grid

CSS grid布局（又叫“grid”)，是一个基于网格的二维布局系统，目的是为了完全改变我们基于网格设计用户界面的方式。CSS 可以用来做我们的网页布局，但它在这一方面做的不是很好。开始的时候我们使用tables, 然后使用floats，position和inline-block，但这些方法本质上都是 hack 的方法并缺少一些重要功能（比如垂直居中）。flex帮助我们解决了问题，但它是简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 可以很好地组合起来使用）。grid是第一个专门为了解决那些我们一直使用 hack 手段而导致的页面布局问题而创建的CSS模块。

一个grid容器的内容：

  • 可以将应用程序分割成不同的空间
  • 可以定义子项的大小、位置以及层级。
  • 与表格类似的是：可以让Web设计师根据元素按列或行对齐排列。
  • 可以定位自己的位置，这样他们可以重叠和类似元素定位。
  • 可以通过结合CSS的媒体查询属性，根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

浏览器支持

image

开始愉快地学习grid布局吧！

参考资料：
A Complete Guide to Grid
grid-layout
CSS Grid Layout Module Level