先来一个简单的 grid-column-gap / grid-row-gap / grid-gap，是说网格线的粗细，默认粗细当然是 0 了，你也可以自定义，但没有颜色，其实也就是网格单元格之间的间隔。最后一个是前两个的...

棋盘已经画好，只要摆上棋子，老夫就以这天地为棋局，与你对弈个天昏地暗！（老鼠忽然中二病发作，快，快灌他喝咖啡~ 我们现在画出了网格，把子元素摆在里面就行了。问题是：每一个子元素放在哪...

先画出格子来，再往里面放东西。现在我们进行第一步，画格子。 那我们如何描述这些网格线的位置呢？想想我们自然语言（就是平时说话）怎么说： 每隔五十像素画一根线；隔五十像素画第一根线，再...

网格布局比弹性布局涉及的属性多了好多。然而其实更简单了。 弹性布局是一维布局，侧轴方向的延伸属于被动技能。网格布局就厉害了，是二维布局，两个轴同等重要。说白了吧，就是在容器里面划上...

前面我们从来没在对齐这个问题上犯过难。 这次么，也还行，反正就是三个情况，每个情况分两个方向（主轴方向和侧轴方向），结合之后六个属性而已。这些属性的取值都差不多，反正相似的地方很多...

于是乎，我们解决了排列的问题，可以方便的横排，竖排，反着排，还不用消除浮动了。但这就够了么？来个新属性吧，order，表示元素在主轴上的排列顺序。额，这个当然不是整体定义，而是对布局中...

我们以前的布局方法，虽然可以完成三个维度，但是每个维度都是各自为政的，一个混乱的体系。 而弹性布局则是一维布局，它有两个轴，优先关心主轴，然后用侧轴辅助。这有点像什么？我们写字，说...

因为我们已经有了一套布局方法，虽然有很多缺点，但是目前，论兼容性，这是最好的，所以这一套不能丢。就算是在过渡时期吧，也可以两者结合着用。 然后我们这里有两套系统：弹性（Flex）和网格...

这是一个重头戏，它们其实不难，只是复杂。复杂到我们最开始看到它们的时候都是相同的感觉——不知所云，无从入手。 读书么，就是把书读薄，再把书读爆的一个过程。所谓读薄，就是从描述中抓住...

这一章应该是自适应和响应式的实践，但是老鼠很懒，就不想写了。 因为这很尴尬，设计一个优雅的案例会搞得很复杂，一章怕是放不下。而一通繁琐操作下来，你会发现我就是把前面的东西再说一遍。...

老有人把响应式和自适应搞混，是因为老有人想要把它们分清。 哪有那么清晰的界限可言，采用方法实现目的就好了啊。为了某个效果，我组合使用怎么算？我不知道答案，我还是努力实现我希望的效果...

我们写了一个网页，在电脑上看起来效果很好。 但确切的说，是在我们自己的电脑上看起来很好，换一个电脑呢？啊，我说的不是兼容性的问题。只是可能这两个电脑的分辨率不大一样，网页显示出来的...