网页设计怎么做网格 第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的高度,最大不设限