UI设计中的网格系统在设计的过程中可以起到很好的辅助作用，其中12列网格系统是最著名的网格系统。有一个有效的数学解释，数字12很容易被1、2、3、4、6和12整除，这为设计多种尺寸的元素提供了很大的灵活性。下面我们一起来了解一下为什么使用12列网格系统以及规则是什么。
此外，开发人员通常使用Bootstrap网格，它也是基于12网格系统，它创建了我们的自适应生态系统。还有更多类型的网格，比如8列网格，无水槽网格等等，但是我们将主要关注12列网格的示例和规则。
规则和示例
1、我们需要将元素放入列内，并在元素之间留出相等的呼吸空间。主要注意的是不要将元素延伸到水槽中。
2、水平上下间距尽量保持一致，特别是对于重复元素来说。
3、因为一些盒状元素很容易在网格内定义，处理开放的元素有时会很棘手。因此，有时候我们还需要添加额外的内部填充以避免它们看起来挤在一起。
4、父元素中较小的元素不受网格规则的约束，只要父元素被成功定位，其中包含的元素就可以有自己的布局。
5、并不是所有的页面都需要使用12列，比如内容不够多的话就不需要使用。
6、响应式通常的适配路径是从大屏幕上的12列网格，到小笔记本上的8列网格，再到移动设备上的4列或2列网格。当从大屏幕切换到小屏幕时，要注意水槽的大小，因为它们应该比大屏幕上的小。如果你在更大的屏幕上设置为30px，那么在移动端10或15px就足够了。
以上就是关于为什么使用12列网格系统一些原因以及设计规则，我们需要注意的是，12列并不是适用于所有页面情况，我们需要根据文字内容以及元素来选择合适的方式。
