获取 CSS 网格

Alex Danilo

构建 Web 应用时,首先需要实现应用内容的布局方式之一。

无论是要用于网站还是应用,很多设计师都使用虚构的网格来布置内容。CSS 组一直致力于简化布局,在此过程中,产生了 CSS 网格布局模块,该模块现在在浏览器中正式推出。

此功能借助实验性标记,可在 Chrome 中试用。自版本 10 起,IE 也开始支持此功能,并且可能很快会支持大多数浏览器。

内容提要

  • 借助 CSS 网格布局,您可以为布局定义行和列
  • 网格可以调整以充分利用可用空间
  • 内容顺序可以独立于网格容器显示顺序
  • 布局可以根据媒体查询而变化,让自适应设计变得更加轻松
  • 内容可以重叠(实现通过其他方法无法实现的布局)
  • 网格布局速度很快

下面的概览视频详细介绍了 CSS 网格布局的工作原理(点击此处可查看幻灯片

试试看

现在,您可以轻松地在 Chrome 中使用 CSS 网格布局。首先,你需要启用实验性标记以启用该功能。

首先加载 chrome://flags 网址,然后向下滚动到启用实验性网络平台功能选项,如下所示:

实验性标志选项的图片

只需点击启用即可启用该标记,此时您应该会看到一条重启浏览器的提示,如下所示:

“重新启动”按钮的图片

现在,只需点击立即重新启动按钮重新启动浏览器,您就可以试用 CSS 网格布局了。

请与我们分享您的想法

CSS 网格布局是适用于 Web 内容的优秀新基元,但是和往常一样,我们都希望了解开发者对它的看法。您可以通过多种方式提供反馈 - 请在此处发表评论,向 W3C CSS 工作组列表发送邮件,主题行中包含“[css-grid]”;记录错误;或者发博客或发推文表达您的看法。我们期待看到您利用这项超级实用的新功能打造的卓越布局。