栅格系统

栅格系统(grid systems)也称网格系统,指的是一种运用固定的格子设计版面布局方法。

使用栅格系统进行网页设计的有点:

(1)让网页的信息呈现更加美观易读,更具可用性(2)对于前端开发来说,网页将更加的灵活与规范。

栅格系统的设计原理:

在网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下:

W =(a×n)+(n-1)i

由于a+i=A,

可得:(A×n) – i = W[1]

栅格化原理设计示意图

栅格系统的应用

可查看译言网:30个最顶尖的基于栅格系统的博客网站设计,文中有若干应用栅格系统的博客网站的链接。http://www.yeeyan.org/articles/view/snlchina/3570

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁。...
    先森007阅读 1,264评论 0 2
  • 一、概念 1、栅格系统(grid systems),也叫“网格系统”。栅格设计系统(又称网格设计系统、标准尺寸系统...
    IvanHung阅读 15,441评论 0 4
  • 最近看到es6支持import与export,迫不及待想要试试: 结尾给出简单、具体的方法 文件目录如下: lib...
    疯狂的冰块阅读 1,761评论 1 0
  • 我也许不是你最重要的,可是我把你当成了我最重要的 ​​​ 我想温柔的对你,就像你温柔的时候一样 我想静静的死去。如...
    柏之长青阅读 178评论 0 0
  • 晚上跟朋友吃饭。 饭局临近末尾,随手点开手机,看到女朋友的短信,很长的一条短信。我只看了几个字,是分手的意思,便不...
    黑豆先生阅读 470评论 0 3

友情链接更多精彩内容