网格系统的作用是什么

网格系统的目的是为了帮助你有序布局，即是由一条条的水平和垂直参考线交叉组成，把设计的界面分成一个一个的小格子，从而控制页面元素并建出一个具有秩序性的界面。，让各个页面元素之间更加规范且统一，使整个页面更加整洁。在当前响应式设计时代，意味着任何设计都会跨越多个终端设备，比如手机、电脑浏览器、车载触摸屏、TV电视等。在所有这些情况下，网格可以帮助你有效安排元素在所需的屏幕尺寸并保持差不多的布局结构。

行是从页面左侧到右侧的相同大小的水平单位。它们很少与列网格系统一起使用，因为元素的高度通常由它们的内容量来定义。水槽是列和行之间相同大小的空白空间，提供了呼吸空间并帮助定义元素之间的相等距离。它们的大小通常为 10-30像素。列通常被定义为网格系统在垂直方向上的块。它们是从页面顶部到底部具有相同大小的垂直部分，它们的目的是规定宽度和每行元素的数量。最常用的系统是电脑端的12列网格、平板电脑的8列网格和移动设备的4或2列网格。单个列单元的宽度通常在60-90像素之间，这将进一步确定所需的容器宽度。边距是指页面的两侧空白区域。给包含的元素提供了呼吸的空间，并与屏幕尺寸一起缩小，直到下一个断点。在 电脑端上，它们的大小取决于列网格系统的宽度。在移动设备上，它们的宽度范围在10-20像素之间。

网格系统对于精益求精的UI来说，简直就是福报，再也不用猜哪里少了一个像素，让你一眼就明明白白，再也不怕页面排版了。