网页设计的网格 第1篇
一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。
网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于_L_形的网格区域。下图高亮的网格区域扩展了2列以及2行。
网页设计的网格 第2篇
模块化网格与多列网格相似，不同之处在于行数增多。模块化网格多用于比较复杂的布局中，为页面提供灵活的内容格式。例如Everlane网站就使用模块化网格来组织商品的选择。
YouTube主页是另一个使用模块化网格的示例。除了左侧的边栏提供常用链接外，所有视频内容都被组织到一个4列的模块化网格中，以最大限度地增加用户在滚动时可以浏览的视频数量。
5、分层网格
分层网格在网页设计中最常见。这些网格的目的是按重要性排列元素。首先将最重要的对象放在页面上，然后灵活地围绕它们使用列、行和模块来帮助组织内容。 新闻和媒体相关类网站倾向于使用这种类型的网格来吸引用户对某些文章的关注。例如上图纽约时报的主页就使用了分层网格结构。
知道了网格的不同类型后，接下来让我们来了解一些在设计中更好地使用网格的技巧。先考虑网格类型在开始设计之前，请先考虑网格的类型，而不是把它放到最后并试图让设计适合网格。尝试打破网格新手设计师在设计时可能会受到网格的限制。创建网格后，在设计决策合理的情况才完全可以打破网格。网格使用的越多越会意识到它是一个指南，帮助我们更快更好地设计。不要害怕留白留白在设计中很重要。没有必要填满页面的每个角落，考虑在各部分内容之间留有适当边距，使用户在浏览页面时可以呼吸和暂停。尝试使用960网格系统960网格系统提供基于960像素宽度的常用尺寸来简化web开发流程。960网格遵循以下结构：
12列网格系统具有足够的灵活性。下面的示例中展示了如何在12列网格中使用3列布局添加内容。
总结：学会分析网格当我们浏览页面时都要注意底层的网格。多思考设计师使用的哪种网格？使用它能带来哪种体验？思考的越多越能学以致用，越能将优秀的网格设计应用到自己的设计中～
网页设计的网格 第3篇
列与列，行与行之间的交接处就是网格线。
Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）。
网格元素设置时可以参考这些行号。
下图则定义了四条纵向的网格线，以及四条横向的网格线：
网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。
接下来我使用了 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。
以下实例我们设置一个网格元素的网格线从第一列开始，第三列结束：