GridControl：用于设计开发的网格覆盖系统。

基于网格的设计与设计本身一样古老。

网格是设计的基本概念，超越了潮流。 Web 2.0 时代闪亮、无衬线、反射阴影的时代早已过去，但网格依然存在。 当我们通过植入大脑的设备访问数字媒体，并通过出现在我们视野中的屏幕查看互联网时，基于网格的设计也将存在。 当远古的穴居人将绘画刻在洞穴壁上时，网格也存在。 好的，也许不是洞穴壁上。

在进行 图库综述 时，我发现了一个专门展示具有出色网格设计的网站的网页设计展示网站，名为 Design By Grid。

为了使网格真正有效，您确实需要对其进行精细调整。 不要“这个大致与那个对齐，那个大致与另一个对齐”。 它必须完全准确，否则会显得业余和廉价。 对细节的关注使伟大的设计师脱颖而出。

尺子：网格设计师的最佳朋友

看起来很明显。 检查某物是否对齐的最佳方法是将尺子放在上面进行检查。 不要用眼睛估计。 您认为 Norm Abram 在安装令人惊叹的厨房台面时会用眼睛估计尺寸吗？ 不会。 但是您也不会看到老诺姆在他的闪亮的新显示器上使用金属尺。 不，我们需要某种数字尺。

叠加数字网格

您已经为您处理了许多此类对齐工作。 文本默认情况下左对齐，您不需要为此使用尺子。 如果您将一堆对象浮动到左侧，并且它们垂直对齐，您可以相信它们将是均匀的，这只是技术的本质。 但是有些东西不会自动对齐。 许多对象将具有自定义填充和边距，您的图像将具有需要考虑的图形元素。 文本可以增长和缩小，并且您的网格需要在此过程中保持稳定。

所以让我们开始吧。 最理想的情况是，我们可以将一些透明的网格纸直接覆盖在屏幕上。 我们可以做到。 工具很简单：**带有线条的重复透明 PNG、与整个屏幕大小相同的页面元素、一些可以随意打开和关闭的魔法**。 让我们提供一些选项，并允许用户选择垂直线、水平线或两者。 我们需要为所有这些单独的标记

<div id="vertical-grid-overlay"></div>
<div id="horizontal-grid-overlay"></div>
<div id="both-grid-overlay"></div>

CSS 非常简单

#vertical-grid-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(images/grid-vert.png) repeat;
	display: none;
	padding: 10px;
}

其他两个具有相同的 CSS，只是背景图像除外。

以下是我制作 PNG 文件的方法。 100 x 100 像素画布，以及一些间隔 10 像素的细线，中间的线比其他线稍暗。 对于水平版本，我只是旋转了画布，对于“两者”，我只是将它们叠加在一起。

请注意 CSS 中的 display: none;。 默认情况下，网格是**关闭**的。 我们需要一种方法来打开网格。 一些 JavaScript 代码可以做到

<p><a href="#" onclick="javascript:document.getElementById('vertical-grid-overlay').style.display='block';">Turn on Vertical Grid</a></p>
<p><a href="#" onclick="javascript:document.getElementById('horizontal-grid-overlay').style.display='block';">Turn on Horizontal Grid</a></p>
<p><a href="#" onclick="javascript:document.getElementById('both-grid-overlay').style.display='block';">Turn on Both Grids</a></p>

现在我们有了一种打开它们的方法，关闭它们的方法也很好。 关于这种覆盖整个屏幕的类似灯箱的效果，一个有趣的事情是它会完全禁用它下面的任何内容。 换句话说，我们不能仅仅在页面上放置一个“关闭网格”链接，因为一旦网格覆盖了它，您将无法单击它。 出于我无法理解的原因，即使您将网格和链接都设置为绝对定位，并将链接的 z-index 设置高于网格，它仍然会被覆盖。

为了解决这个问题，让我们将“关闭”链接放在网格元素本身内部（这就是为什么我在那里添加了填充，如果您一直在关注的话）。

<div id="vertical-grid-overlay">
	<p class="alert">
		<a href="#" onclick="javascript:document.getElementById('vertical-grid-overlay').style.display='none';">TURN OFF GRID</a>
	</p>
</div>

<div id="horizontal-grid-overlay">
	<p class="alert">
		<a href="#" onclick="javascript:document.getElementById('horizontal-grid-overlay').style.display='none';">TURN OFF GRID</a>
	</p>
</div>

<div id="both-grid-overlay">
	<p class="alert">
		<a href="#" onclick="javascript:document.getElementById('both-grid-overlay').style.display='none';">TURN OFF GRID</a>
	</p>
</div>

我稍微设置了一下链接的样式

p.alert {
	background: red;
	color: white;
	padding: 5px;
	width: 120px;
}

结果

查看 示例页面。

[下载示例]

其他选项

当然，在撰写本文和编写示例代码后，我发现了一些其他非常好的方法。 其中之一是名为 Grid 的 JavaScript 书签，它允许您只需单击一下按钮即可在任何网站上覆盖网格。 它非常好用，但最终可能比需要用到的复杂，具有很多功能。 Gridmark 是另一个具有不同功能的书签，包括一些自定义功能。