网页设计怎么做网格 第1篇
一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。
网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于_L_形的网格区域。下图高亮的网格区域扩展了2列以及2行。
网页设计怎么做网格 第2篇
列与列，行与行之间的交接处就是网格线。
Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）。
网格元素设置时可以参考这些行号。
下图则定义了四条纵向的网格线，以及四条横向的网格线：
网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。
接下来我使用了 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。
以下实例我们设置一个网格元素的网格线从第一列开始，第三列结束：
网页设计怎么做网格 第3篇
问题来了，我们知道了网格的基础概念，那么我们如何自己定义一套科学标准的网格系统，和骨架，来保证骨架的科学性和设计连续性呢？
第一步：定最小的设计单位
我们都学过化学，在化学里面有最小单位原子，原子可以组成分子，分子可以组成更多的化学元素，那么在UI系统中其实也一样，我们先要保证你的这个世界里面的元素是有个基础的，常用的单位有3（淘宝、天猫、蘑菇街等最小单位），4（funcy），5（raby、亚马逊、pinterest等）这个具体看你们产品的复杂程度，目前整体设计区域是最小单位越来越大，像Airbnb，pinterest等都是大留白，单位都是5甚至6
第二步：定边距和水槽大小
前面说过，先定最小单位，加入我们最小单位是5，总宽是375（sketch1倍设计尺寸）那我们产品内容我希望整个系统设计风格别那么满，留白稍微多点，我们左右边距是10，中间内容和内容之间我也想留10，这里注意，单位一定是前面我们定的5的倍数。
掏出计算器：
（375屏幕总宽- 边距左右两边20 - 水槽五个50）➗（6内容移动端是6）= 51（四舍五入）
边距：10
水槽：10
内容：51
这就是我们定的栅格，系统骨架，设计时候必须保证每个设计元素，在我们框架内，保持规则，边距不要出现内容，水槽也不要放内容，如果放，尽量以组的形式。
必然会出现除不尽的情况，这个避免不了，取整数，必然有个内容区域面积会少1个px，但是这个木有什么关系。
也可以根据不同情况做不同的组合网格，这个具体还是要看是什么的业务场景。
第三步：定横向间距
前面我们虽然说过，我们在定骨架时候可以忽略横向，但是在我们UI系统中需要对横向的设计间距进行统一，我们需要保证横向的所有设计产品是有规律的，这里有个科学的方法：
网页设计怎么做网格 第4篇
设置每一个块状体彼此之间的距离
显式网格是我们用 grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。
隐式网格会自动生成，根据我们所设置的相关参数持续排布。若没有指定行的大小，则默认为auto
设置列：每一列最小200px宽度，最大1fr的比例，根据大小自动生成有多少列数
设置行：最小100px的高度，最大不设限