网页设计里面的网格 第1篇
列与列，行与行之间的交接处就是网格线。
Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）。
网格元素设置时可以参考这些行号。
下图则定义了四条纵向的网格线，以及四条横向的网格线：
网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。
接下来我使用了 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。
以下实例我们设置一个网格元素的网格线从第一列开始，第三列结束：
网页设计里面的网格 第2篇
一般而言，会自动将网格布局所含概的子类类别自动按照代码顺序填充进去
grid-column 是 CSS Grid 布局中的一个属性，用于指定一个网格项目在网格中的列位置。它可以定义项目开始和结束的列线，控制项目跨越的列数。
第一个块状体的末尾线默认为第二个块状体的起始线。
span所定义跨越2列
grid-column-start 是 CSS Grid 布局中的一个属性，用于指定网格项目开始在哪一列的网格线。它可以单独使用，也可以和 grid-column-end 配合使用来定义项目跨越的列范围。
搭配grid-column-end:
网页设计里面的网格 第3篇
一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。
网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于_L_形的网格区域。下图高亮的网格区域扩展了2列以及2行。
网页设计里面的网格 第4篇
实现优秀网页布局的最佳方式是运用栅格系统。网格是设计的骨架，帮助我们有序地对齐和组织网页内容。通用正确地使用网格，我们不会随意地在页面中放置元素，相反，我们会很清楚知道将这些元素放在合理的位置，使得有助于提高设计效率和设计质量。无论是为电脑端还是手机端设计，使用网格可以引导我们做出设计决策、并为用户创造更好的体验。
网格由列（column）、槽（gutter）、安全边距（margin）组成。它们在一起形成了屏幕的宽度尺寸。
Column 是跨越内容区域的垂直部分。网页设计中有的列（column）更多，网格就更灵活。列的宽度由设计师自己决定。传统的做法是在电脑端页面中使用 12 列，Pad 端使用 8 列，手机端使用 4 列。列的宽度一般在 60px～80px。列宽是影响实际内容区域宽度的关键因素。
槽（gutter）是列（column）之间的间隙。槽的作用是垂直地划分每个模块的内容。更宽的槽更适用于大屏设备。更宽的槽可以用来增加页面的间距，让页面信息可以被展示得更加舒展。
安全边距（margin）是内容和屏幕左右之间的间隔。更宽的安全边距更适合较大的屏幕，因为他们可以围绕内容区域给出更多的白色区域。
上面介绍了 3 个概念之后，我们可以使用基数为 8pt 的网格系统来风格页面。8pt 网格系统使用 8 作为基础单位来调整网页元素的大小和间距。这意味着，网页上的高度或宽度、距或者内边距，都是 8 的倍数。
网页设计里面的网格 第5篇
使用偶数来调整元素尺寸或者元素间距，能很好地适用于所有屏幕尺寸。举个例子，在 倍尺寸下，如果你使用奇数来定义元素尺寸和间距，很容易会多半个像素。如果一倍图下的 5px 以 倍的尺寸导出，很容易会多半个像素。选择 8 作为基数的原因是大多数屏幕尺寸可以被 8 整除，所以很容易兼容适配。此外，基数 2 或基数 4 不在电脑端使用，因为颗粒度太小，不方便设计师操作。另外一个使用基数 8 的优点是避免我们在设计中太过纠结。