在这个介绍性的教程中，我会向大家介绍这个相对较新的 CSS 功能，我将先讨论一下当前浏览器的支持情况，之后我会用一些例子告诉大家CSS Grid布局模块是如何工作的。
什么是CCS Grid布局模块
Grid布局背后的核心思想是将一个网页划分为列和行，并可以基于不同大小、位置和图层的行和列来定位并调整我们创建的块元素的大小。
利用Grid，我们也可以在不对HTML做任何改变的情况下，只使用CSS来更改元素的位置。这也可以与媒体查询相结合，在不同断点处改变布局。
浏览器支持
在我们深入了解Grid布局之前，了解 浏览器的支持情况 以及如何在当前浏览器启用此功能对于我们是十分有益的。
Internet Explorer
Grid布局的第一个提案是由Microsoft提出的，并且IE10要附带 -ms 的前缀执行。如果你看过 浏览器的支持情况 ，你会知道 IE11 和 Edge 也支持Grid布局。
Chrome和Opera
使用Blink渲染引擎可以浏览器中启用Grid布局，如在Chrome或Opera浏览器中利用地址栏导航到 chrome://flags (或 opera://flags ，同样适用于Opera)，并找到 Enable experimental Web Platform features 的标志。启用它之后，将会要求你重新启动浏览器。
建议在这篇文章或者你自己实例中使用Chrome或者Opera浏览器，因为目前为止 Blink 可以 最好实现 Grid布局。
Firefox
导航到 about:config ，搜索 layout.css.grid.enabled 标志，然后双击或按回车切换到 true .
Grid 布局 Polyfill
在当前浏览器中使用 polyfill 也可以使Grid布局模块工作正常实现。
一个Grid布局实例
让我们从一个例子来看看Grid布局的威力，现在我先详细的解释一些新的概念。
想象一下你要创建一个带有四个全高度列布局(微博、 答复、 搜索和邮件)的Twitter 应用程序,你可以将其抽象为类似于下面的屏幕快照。
HTML代码如下:
Tweets
查看更多关于CSSGrid布局模块简介_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114609