CSS grid 布局代码生成器是一款帮助开发人员更轻松地创建自定义 CSS 网格布局的工具。 生成器允许用户指定列数、行数和 gap 大小。

CSS grid 网格布局模块附带了一个新的 CSS 单位，名为 fr 。fr 是 “分数(fraction) “一词的缩写，简单明了。有了这个新单尾，我们就可以快速将网格按比例分割成不同的列或行

为了给 flex 元素提供更合理的默认最小尺寸，本规范引入了一个新的 auto 值，作为 CSS 2.1 中定义的 min-width 和 min-height 属性的初始值。

CSS 网格布局模型（CSS Grid Layout Model）可以沿水平和垂直两条轴线创建和更新布局，同时影响元素的宽度和高度。

当我们真正掌握了 Flexbox 布局模式的奥秘，我们就能构建出绝对令人难以置信的作品。无需任意断点即可伸缩的流体布局。在本实用互动教程中，我们将揭开 Flexbox 算法的神秘面纱，学习如何利用它实现非凡的效果。

CSS Grid 是在网络上构建布局的强大工具，但就像所有强大的工具一样，它也有一个显著的学习曲线。在本教程中，我们将建立一个认识模型，了解 CSS Grid 如何工作，以及如何有效地使用它。我将与大家分享我在学习过程中最大的 灵光一现。

这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念，通过学习flexbox布局，你会发现以往遇到的所有的关于布局的问题，现在都可以轻松解决了。

CSS3中新出现的多列布局(columns)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示

在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的。但大部分时候，使用table是不正确的，应该使用HTML+CSS实现你的布局。如果你无法判断是否应该使用table，参考一下上面的几条，相信你能找到答案。

也许是因为我们的文字都是从左到右写的，所以才导致HTML规范中所有跟布局相关的设计都是倾向于左右布局。所以才导致左右居中非常容易，而上下竖向居中经常会出错。在《如何竖向居中》这篇文章里曾介绍过两种竖向居中的方法，但每种方法都有自己的局限。于是技术是第一生产力的真理又一次发挥作用

在各种技术论坛里经常会有这样的问题提出，“我如何能将这个东西竖向居中？”这个问题通常会跟随着这样一句话，“我使用了 vertical-align:middle，但是不管用！ ”这个问题其实有三个层面的原因

CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。