网页设计国字形布局 第1篇
流动布局可以看做是静态布局的动态版，响应式布局可以看做是几个不同尺寸的流动布局，在每个流动布局之间进行自适应。流动布局、响应式布局、弹性布局和flex布局都能实现自适应的效果，只不过弹性布局是用em/rem为单位，流动布局和响应式布局是以百分比为单位，flex由于兼容性问题，PC端不太常用。
各种布局不是绝对的，可以综合使用，目的都是使页面在不同分辨率的设备上实现更好的用户体验，针对不同性质的网站采用合适的布局方式。
我这里将栅格设计放了进来，但实际上，页面布局可以基于栅格也可以不基于栅格，完全看设计师个人和实际工作场景了。
----------------------------------------------------------------------------
看完布局，你会发现，很多国内常用的布局都和栅格有关，有些网页设计师在做的时候也喜欢用栅格来规范自己的设计稿，所以我简单的梳理了一下栅格的小知识，希望对大家有用。
首先，栅格化设计（grid-design ）不等于栅格化开发（css grid ）。我之前一直以为用栅格就要实现网页的响应式，由于我们是to b类的网站，所以刚开始很抵触，总觉得没法定宽设计某个模块，后来查了些资料才发现，这是两回事。
栅格化设计是针对设计师而言，主要是为了提高网页的规范性和统一性，可以不考虑页面的响应式；而栅格化开发，是针对开发人员，特指前端攻城狮使用的css框架，用来实现页面的响应式布局。也就是你可以按照栅格去出设计稿，但不一定基于栅格开发，基于栅格开发意味着需要实现网页响应式布局。
那么栅格是什么，想必大家都很清楚，就是将网页划分为几个等分栏。大概就长下面这样
栅格包括列宽（column）、间隔（gutter）和外边框margin，gutter是左右均分，分别位于列宽的两侧，margin是位于整个网页的两侧的空白区，由1/2的gutter和一个padding组成，一般来说网页的总宽度是不包含左右两侧的margin的。
网页设计国字形布局 第2篇
静态布局也叫做固定布局，网页内容区采⽤绝对宽度，网页内每个模块的尺寸大小固定，一般整体在浏览器内居中显示，并会设置最小宽度min-width，当分辨率小于最小宽度就会出现滚动条，如果大于最小宽度则内容居中外加背景 。
找了一个很古老的网站，大家看看就好。。。
网页设计国字形布局 第3篇
我个人将栅格归为了4类：有间隔栅格、无间隔栅格、局部栅格、水平栅格。有间隔栅格最为常见，无间隔栅格也就是gutter为0，局部栅格一般适用于页面内有侧边栏固定的布局，侧边栏可以不算入栅格范围，水平栅格是指垂直和水平都进行栅格，感觉不太常用。
栅格常见分栏
12栏和24栏是最常见的，因为能够被2、3、4、6整除，也就是页面能够均分为2、3、4、6等份，其次是16列比较常见。列数越多，排版布局越灵活，列数越少限制性越大，同时页面的统一性更强 。可以根据网页特点选择合适的栏数，不必拘泥。
下图是经典的960栅格系统
网上也有很多详细介绍栅格的文章，感兴趣的朋友可以加以研究，尤其是material design的8点栅格系统，值得好好学习和借鉴。
差不多就这样，希望这篇文章能够帮到你，当然如果文章中有问题的地方，欢迎各位留言。
对了对了！！
有一件非常非常重要的事情，为了你可以第一时间看到干货，给阿门教你PS标星星！
只需要三步，你就可以拥有我。。。。。。。。。。的教程和文章以及福利。