如何利用栅格快速搭建网页结构
时间：2023-09-27 20:48:01 | 来源：网站运营
时间：2023-09-27 20:48:01 来源：网站运营
如何利用栅格快速搭建网页结构：在我们平常做网页设计，最常用得到的就是栅格系统，说到栅格系统，
什么是栅格系统？
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：
(A×n) – i = W[1]栅格系统的使用步骤
- 确定内容的总宽度W（常用的1180px、1190px、1200px、1400px）
- 确定栅格数目n（如果你的网页结构相对简单，则n=12即可，如果网页结构比较复杂或者具有排版的不确定性，则用n=24。）
- 确定水槽的宽度i（水槽宽度常用的6、8、10、15、20px）
- 在sketch/ps里设置上面的参数即可得到一套栅格系统
栅格在Sketch软件如何快速搭建：
在工具栏——右侧——显示——布局设置：
这样就可以快速绘制好我们想要固定安全尺寸，也就是我们常说的版心。
栅格在PS软件如何快速搭建：
在PS菜单栏——视图——新建参考线版面
Ω
可以用（总尺寸——版心尺寸）/2 就是左右二边的尺寸，这样中间版心就算出来了。
以上是如何利用格栅快速搭建网页结构 ，如有问题，可以私聊我。
在线咨询
