自从去年下半年开始，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控制网格轨道的大小。这个函数包括一个最小值和最大值。

几周前，我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样，对这个话题也很陌生，我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。

前端圈真乱，这话一点不假。但乱也乱的好处，乱则生变，有变化才有进步。今天还是老调重谈，聊聊移动端页面的适配。因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话，建议你花点时间阅读完下面我扯蛋的东东。

在CSS Grid Layout中，如果没有人提出display:contents;来解决一部分问题，那么你就无法深入的讨论CSS Grid Layout中的subgrid，那么我们真的需要subgrid？事实并非如此，display:contents的确帮我们解决了这类问题，但这些问题与subgrid帮助我们解决的问题不同。在这篇文章中，我将用实例来介绍他们的不同之处。

网格布局最终使我们能够在CSS中定义网格，并将项目放置到网格单元格中。这本身就很好，但事实上我们也不必指定每个网格轨道，也不必手动拖动每一个网格项目。网格足够灵活，可以适应它们的网格项目。这些都由所谓的显式和隐式网格来处理的。