#grid：网页网格布局工具

Denis

发布于 2023-04-15 15:14:54

6430

发布于 2023-04-15 15:14:54

文章被收录于专栏：WordPress果酱WordPress果酱

如果你开始使用网格来进行网页设计，那么 #grid 是你必不可少的一个工具，#grid 就是一个使用 jQuery 和 CSS 构建的小工具，它会在网页上插入布局网格线，让你能够检测和调整页面上元素位置。

#grid 适应所有宽度的页面，可以调整任意的高度布局（默认为 20px），可以实时隐藏和打开网格线，#grid 使用非常简单，一个 Javascript 文件，简单的几行 CSS 代码，和一个用于垂直网格的图片。

#grid 使用

#grid 使用非常简单，在你的页面上插入所需的 Javascript 和 CSS代码之后，只需按下 G 就会显示网格线，松开网格线消失，G + H 就会一直显示网格线，松开也不会消失，如果没有显示网格线，可以按下 G+F 把网格线调到前面。#grid：网页网格布局工具这篇日志已经启用了，你可以按下这些快捷键来测试下效果。

安装 #grid

下载 hashgrid.js 脚本，并且上传到服务器中。

然后在网页中添加如下 JavaScript 代码：

<!-- Grab latest version of jQuery -->
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- Include the hashgrid script -->
<script type="text/javascript" src="hashgrid.js"></script>

然后在网页中添加如下 CSS 代码：

/**
 * Grid
 */
#grid{
    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;
}

/**
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,
 * and use margins to set column gutters.
 */
#grid div.vert{
    width: 139px;
    border: solid darkturquoise;
    border-width: 0 1px;
    margin-right: 19px;
}

#grid div.vert.first-line{
    margin-left: 19px;
}

/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid div.horiz{
    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted darkgray;
    margin: 0;
    padding: 0;

}

/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids 
* option in the hashgrid.js file.
*/
#grid.grid-1 div.vert{
    /* Vertical grid line colour for grid 1 */
    border-color: darkturquoise;
}
#grid.grid-2{
    /* Adjustments */
    padding: 0 160px;
    width: 660px;
}
#grid.grid-2 div.vert{
    /* Vertical grid line colour for grid 2 */
    border-color: crimson;
}

#grid 可以支持各种网格系统的，目前默认提供 980 宽的布局（940 内容区，两边 20 边界），如果使用别的网格模式，需要调整下CSS 和制作一张新的用于垂直网格布局的图片。

下载：#grid 演示：#grid：网页网格布局工具

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

grid