在这篇文章中，我们将来看一些CSS3新属性，从而用HTML和CSS处理网格的时候更容易。但首先让我们讨论一点HTML和CSS网格的历史，了解清楚为什么以前很困难。

网格简史

曾几何时，我们的布局是一团糟。表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作（但其实非常糟糕）。

把目光投向今天。HTML和CSS已经变得非常复杂，Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而，一个历史遗留问题浮出水面：多列布局。

更复杂的是，我们的页面宽度不再是静态的。响应式大行其道，所以我们倾向于基于百分比的列宽。基于固定960像素宽的简单网格已经行不通——我们需要流体网格。

CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局，我们需要添加clearfix。通过这种方法，来修正父元素的高度坍塌问题（浮动元素脱离标准流，父元素会认为浮动资源不存在）。我们大部分接受这种方法，但许多人仍然认为它是一种hack（奇技淫巧）。

通过inline-box的方法并不常见，但仍然存在。内联元素会保持在一行，他们自然顺序排列。当一行被占满，后面的元素自然折到下一行。但因为他表现为文本特性，其行为类似文本。这意味着你必须避免HTML元素之间的空白元素(空格，tab，换行……)。Inline-block不是为这设计的，不且工作的并不十分如意。

在这两种方法中，浮动的方法更可靠。这就是为什么它更流行，排在第一位。然而，创建多列后，我们发现需要再次压缩内容，因为我们需要一些填充距离。这就引出最终的问题：盒模型

盒模型是什么，简单来说，一个元素的实际尺寸包括：高度/宽度+内边距+边的宽度。外边据并不使盒子变大，仅仅在自己和其他元素之间增加空隙。所以设置宽度时,比如25%，其盒子的实际宽度比这大得多，这意味着在一行没有足够的空间放下四个元素。

这烦人的问题有不同的解决方案：负外边距，嵌套元素——我知道的全部了。他们都需要额外的CSS或DOM元素，算作hack方法。让我们面对现实，CSS2中没有解决网格的好方法。

然而今天，CSS3提供很好的支持，规范增加了专门用于网格的几个新特性。这些特性都有哪些？我们如何使用他们？让我们看一看。

box-sizing: border-box

<div class="row">
  <div class="column">Col one</div>
  <div class="column">Col two</