栅格布局想必大家都很了解，我们做页面开发的时候，往往对页面板式的要求很高，如何对各个区域的内容排版，并使之对齐是我们的一大难题。而栅格系统就是我们排版的利器，他支持自动对齐、自动计算边距、流式布局等优点，简单好用的特性使得栅格布局成为所有主流框架的必备的功能。
我们简单分析一下栅格布局的原理：
容器/行/列/栅间距
一个栅格布局需要3部分组成——容器（container），行（row），列（column，也可称为栅）。容器是用于确定宽度的，行需要放到容器中；行是将列分组，并把一组列合并为一个行；列是正真的显示内容的元素，我们的内容就写在列里面。具体可参考下图
如果仅是行与列来布局，自适应布局也能满足需求，栅格布局的高明之处在于它还提供了列与列之间存的间距，我们称之为栅间距（gutter），栅间距仅存在列与列之间，列和容器之间是不应该存在栅间距的。栅间距的存在使得我们不用自己去计算padding，设置布局更加简单，对齐也更加容易。
列宽
完善的栅格布局框架，都会提供一个类似自适应布局一样的声明列宽的class类。首先系统把容器分为若干份，这个总份数一般都是3、4的倍数，这样利于排版。然后再提供若干代表份数的类，让列去继承，这样列就会占据容器总宽度的指定份数（span）了。如上面我们的例图，容器的总份数是9，各个列继承不同的份值，并保证了一行里面的所有列的份值相加也是9。
栅格嵌套
同时栅格系统是可以嵌套的，即列里面也可以作为容器，里面可以再声明一行，然后继续声明子列，这种行为我们称之为栅格嵌套，如下图：
列的换行行为
早期的栅格系统框架，列与列之间是不能换行的，即一行中的所有列都必须确保在同一行中。但是随着响应式布局的兴起，一行中的列也需要出现换行行为，而且换行后也没不能出现显示错误，这种行为我们称为列的换行行为，如下图。因为涉及栅间距的计算，所以不是每一个栅格系统都可以支持“列的换行行为”的。列的换行行为对于完成响应式布局非常
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式