栅格布局
what?什么是栅格布局？
如果说栅格布局很陌生，那么换个说法 Grid layout 应该会熟悉的多。
不过说到grid,大多数会联想到 css grid，但是不准确。
个人理解css grid 应该是grid布局的一个子集，相当于是grid布局（grid layout）的一个具体的实现。 说的再直白点相当于软件工程和软件的区别，软件遵循软件工程的规则。
what？ 什么是 grid layout？
grid layout（栅格布局）又是栅格设计的一个具体实现，同理是软件和软件工程的区别。 不同的是，这里的“软件工程”是栅格设计，而栅格布局是栅格设计的一个子集。
what? 什么是栅格设计？
栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
---wiki
what?栅格设计的特点是什么？凭什么说某个设计是栅格设计？
栅格设计的特点是重视比例、秩序、连续感和现代感。 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分 ---wiki
wikizh.wikipedia.orgwhy? 为什么栅格人们都推荐的移动端分6个栅格？pc人们推荐12或者24个栅格？
如果你真的想理解栅格布局，那么必然会提问，为什么antd需要分的是24格而不是23格，22格，甚至10格?
这跟屏幕本身的大小有关系，常见的pc的屏幕是1920，1440，1200 三种，仔细思考24或者12都可以被三者整除，一方面是方便设计，另一方面也是为了更容易的去布局。
同理，移动端（手机）屏幕的宽度375px，但是大家为了适应二倍屏，一般设计稿都作成750px，750/6也是能整除的。 另外移动端分6格的原因还是因为以6作为除数，所得到的商的大小在移动端屏幕上已经非常小了。
举个栗子
你现在看到的是163px
这个长度真的在屏幕上看起来算很小了，125大概是这个长度的3/4。 仔细想想，如果再小的话，第一设计不常用，第二用户也根本看不清，尤其是对老年用户。
how? 栅格布局（grid layout）是如何实现的？
栅格布局的实现的核心在于理解什么是栅格布局。 个人推荐读一读antd-design的设计理念
A UI Design Languageant.design1. 栅格布局的核心在于能正常的使用栅格进行动态自适应的变化，尤其是面对不同的宽的的屏幕的时候，这点就显得特别重要。 2. 栅格布局的另一个精髓在于栅格是分行列的。 而个人理解所谓的栅格，行列叠加在一起才叫栅格，但是我们关注的其实是格，也就是上面提到的屏幕在横向上到底分多少行，因为这个才是关系到我们的布局的
show me the code？
下面是一个基于flex实现的简单的的栅格布局
https://github.com/blackcloud2333/flex-gridgithub.com（虽然感觉很简陋）
欢迎各位大佬来指正和交流
扫一扫
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
