Web布局非常困难。它如此困难的原因是自从使用CSS来完成Web布局开始就并没有真正的完成复杂的Web布局。虽然我们使用很多技术手段能实现Web的固定布局，但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是，我们有了Flexbox模块，或许还有很多读者已经开始使用CSS Grid和Box Alignment模块做Web布局。在这篇文章中，我将解释如何将这些组合在一起使用，你会发现通过对Flexbox的理解，你也能更好的理解Grid布局。

CSS Grid布局规范现在处于候选人推荐状态。这种状态也意味着规范已完成。现在在讨论的是一些实现细节，而不是新功能。规范一些细节是有必要的，以便于浏览器能更好的实现。这对于我们开发人员也是有好处，也使开会更容易。然而这并不意味着停止了工作，而新的用例和特性不能提出Grid布局的未来功能。因此，在这篇文章中我将看看我认为网格布局未来还能做些什么。我喜欢这样去思考，不只是考虑CSS Grid，还可以考虑任何CSS规范。考虑如何更好的适应你的用例。

CSS网格布局非常擅长在线制作漫画，特别是你想要灵活的实现你想要的漫画风格。这篇文章中我们通过使用巴里猫（Barry the cat）来演示如何构建一个具有响应式的漫画效果。

Grid布局来了，Grid布局来了。千真万确，各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~2017年3月，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid，所以，谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持，那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

自从去年下半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

在Web的布局设计中时常会碰到全屏的效果，而且很多时候会碰到在限制宽度的容器中实现全屏效果。到写这篇文章的这个时候，前端有关于布局方面的技术又得到了新的突破，比如CSS Grid布局方案，到现在已经得到了主流的浏览器支持。在这里提到CSS Grid布局方案，其实就是想说一点，通过现在的CSS Grid布局效果，也可以实现在限宽容器中实现全屏布局效果。这也是接下来要介绍的内容。

CSS Grid是一个强大的工具，它允许在Web上创建二维布局。这一篇学习CSS Grid的指南，通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员和W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons和@Rachel Andrews两位女士，她们是CSS Grid的主要贡献者，可以说要是没有她们，就没有今天的CSS Grid。

在《如何使用CSS Grid布局实现限宽容器全屏效果》一文中介绍了使用CSS Grid布局实现限宽容器全屏效果，特别是全屏图片的效果时常可见。但这篇文章并没有详细阐述为什么使用CSS Grid这种方法。@Rachel Andrew新发的博文尝试阐述其中的原理。

CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了CSS Grid Layout之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化，那么他在原生客户端（也就是APP）开发中，其运用是否也能像Web一样呢？接下来我们就一起来探讨。

CSS Grid Layout规范中的minmax()函数是一个非常有用的新特性。这个函数能够让我们用最简单的CSS控制网格轨道的大小。这个函数包括一个最小值和最大值。