构建 Web 应用时,首先需要做的就是安排应用内容的方式。
许多设计师使用虚构的网格来布置网站内容,无论是网站内容还是应用内容。CSS 小组一直致力于让布局变得更简单,为此,我们开发了 CSS 网格布局模块,这一模块现在正出现在浏览器中。
此功能目前在 Chrome 中处于实验阶段。自 10 版起,IE 中也实现了这一功能,而且可能很快就会在大多数浏览器中推出。
摘要
- 借助 CSS 网格布局,您可以为布局定义行和列
- 网格可以自行调整,以充分利用可用空间
- 内容顺序可以独立于网格容器的显示顺序
- 布局可以根据媒体查询而变化,简化自适应设计
- 内容可以重叠(启用其他方法无法实现的布局)
- 网格布局速度很快
下面的概览视频详细介绍了 CSS 网格布局的工作原理(点击此处查看幻灯片:
试试看
现在,您可以轻松在 Chrome 中使用 CSS 网格布局。首先,您需要开启实验性标记以启用该功能。
首先加载 chrome://flags 网址,然后向下滚动到启用实验性 Web 平台功能选项,如下所示:
只需点击启用即可开启该标志,您应该会看到重启浏览器的提示,如下所示:
现在,只需点击 Relaunch Now 按钮重启浏览器,即可试用 CSS 网格布局。
请与我们分享您的想法
CSS 网格布局是一个很棒的新基元,适用于 Web 内容,但和往常一样,我们都非常期待了解开发者对它的看法。您可以通过多种方式提供反馈 - 请在此处发表评论,发送邮件至 W3C CSS 工作组列表,并在主题行中包含“[css-grid]”,记录错误或撰写博文,并在推文上发布您的想法。我们期待看到您利用这项超级实用的新功能构建的卓越布局。