960网格系统怎么用？-建站教程-锦华智联科技

960 Grid System 教程：从零开始掌握经典布局框架

什么是 960 Grid System？
为什么要使用它？它的优缺点
核心概念：列、槽和 gutter
如何使用 960 Grid System？（实战步骤）
- 下载框架文件
- 理解 CSS 文件（12列, 16列, 24列）
- 在 HTML 中应用类名
- 并查看效果
高级技巧：嵌套网格
现代替代方案：响应式设计与 Flexbox/Grid
960 Grid System 的今天

什么是 960 Grid System？

960 Grid System 是一个流行的 CSS 布局框架，它提供了一个固定宽度的网格容器（通常是 960 像素宽），并将这个容器划分为多个等宽的列（如 12 列、16 列或 24 列）。

（图片来源网络，侵删）

它的核心思想是：通过预定义的 CSS 类，让开发者可以快速、轻松地创建对齐、整洁的网页布局，而无需自己编写复杂的 CSS 来计算宽度和浮动。

你可以把它想象成一张带有格子的画布，你只需要把内容（文字、图片、模块）放进格子里,就能保证它们整齐划一。

为什么要使用它？它的优缺点

优点

快速开发：极大地提高了布局效率，设计师和开发者可以专注于内容,而不是布局细节。
设计一致性：确保所有页面元素（如侧边栏、内容区、页脚）的宽度和间距都保持一致,提升视觉体验。
跨浏览器兼容性：它主要基于 float 属性，在当时（2000年代末至2010年代初）能很好地兼容所有主流浏览器。
易于理解：对于初学者来说，通过类名（如 .grid_4）来布局比直接写 CSS 更直观。

缺点

固定宽度：最大的弊端，布局宽度固定为 960px，在大屏幕上会出现大量空白，在小屏幕上（如手机）则会出现水平滚动条,体验很差。
不灵活：一旦选择了列数（如 12 列），在项目中途很难改变，嵌套虽然可以增加一些灵活性,但仍然不够。
冗余代码：即使不使用所有列，也需要加载整个框架的 CSS 文件,可能会产生不必要的代码。
已被时代淘汰：随着响应式设计的兴起，这种固定宽度的框架已经不再是现代 Web 开发的首选。

核心概念：列、槽和 Gutter

理解这三个概念是掌握 960 Grid System 的关键。

总宽度: 960px,这是整个网格容器的宽度。
列: 网格中的垂直单元，960 系统将总宽度分为 n 个等宽的列（如 12 列）。
槽: 列与列之间的空间，这个空间是为了放置内容,并让列之间产生间隔。
Gutter (沟槽): 就是槽的宽度，在 960 系统中，Gutter 的宽度是 20px。

计算方式 (以 12 列为例):

（图片来源网络，侵删）

列数: 12
Gutter 数量: 因为有 12 列，所以它们之间有 11 个 Gutter。
总 Gutter 宽度: 11 * 20px = 220px
总列宽: 960px - 220px = 740px
单列宽度: 740px / 12 = 666...px (约 62px)

在 12 列布局中：

每一列的宽度约为 62px。
每一列的右边有 20px 的 Gutter（最后一列除外）。

CSS 框架会自动帮你计算好这些宽度,你只需要知道这个原理即可。

如何使用 960 Grid System？（实战步骤）

假设我们要创建一个简单的三栏布局：左侧边栏 (4列)、区 (8列)、右侧边栏 (4列)。

下载框架文件

访问 960 Grid System 的官方网站，下载其 ZIP 压缩包，解压后，你会看到 css 和 docs 文件夹。

（图片来源网络，侵删）

css/ 文件夹包含了所有核心样式文件：
- reset.css: 重置浏览器默认样式,保证一致性。
- text.css: 预定义了一些文字样式（如标题、段落）。
- 960_12_col.css, 960_16_col.css, 960_24_col.css: 核心文件，分别对应 12、16、24 列的布局。
- grid.png: 一个背景图片,可以在开发时作为网格的参考线。

理解 CSS 文件

我们需要根据项目需求选择一个列数的 CSS 文件，对于我们的三栏布局，选择 960_12_col.css。

打开这个文件，你会看到大量的 CSS 类，

.container_12: 创建一个 12 列宽的容器。
.grid_1, .grid_2, ..., .grid_12: 创建对应列数的网格单元。
.prefix_1, .suffix_1: 在网格单元前/后添加空白。
.push_1, .pull_1: 将网格单元向左/右推动。

在 HTML 中应用类名

我们创建一个 index.html 文件，并引入所需的 CSS 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">960 Grid System 示例</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入 12 列布局的核心样式 -->
    <link rel="stylesheet" href="css/960_12_col.css">
    <!-- 引入文本样式 (可选) -->
    <link rel="stylesheet" href="css/text.css">
    <style>
        /* 为了让效果更明显，我们给每个区块添加一些样式 */
        .sidebar, .main-content {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 20px;
            min-height: 300px; /* 给一个高度，方便查看 */
        }
        .main-content {
            background-color: #e0f7fa; /* 主内容区用不同颜色区分 */
        }
    </style>
</head>
<body>
    <div class="container_12">
        <!-- 左侧边栏: 占用 4 列 -->
        <div class="grid_4">
            <div class="sidebar">
                <h2>左侧边栏</h2>
                <p>这里是左侧边栏内容，宽度为 4 列。</p>
            </div>
        </div>
        <!-- 主内容区: 占用 8 列 -->
        <div class="grid_8">
            <div class="main-content">
                <h2>主内容区</h2>
                <p>这里是主内容区，宽度为 8 列，4 + 8 = 12，正好占满一行。</p>
            </div>
        </div>
        <!-- 清除浮动，防止后续内容被撑开 -->
        <div class="clear"></div>
        <!-- 页脚: 占用 12 列 -->
        <div class="grid_12">
            <div style="background-color: #333; color: white; text-align: center; padding: 20px;">
                <p>&copy; 2025 960 Grid System 教程</p>
            </div>
        </div>
    </div>
</body>
</html>

代码解释:

<div class="container_12">: 这是最外层的包裹元素，它设置了 width: 960px 和 margin: 0 auto（居中）。
<div class="grid_4">: 这个 div 的宽度被设置为 4 列的宽度（约 62px + 20px Gutter）。
<div class="grid_8">: 这个 div 的宽度被设置为 8 列的宽度。
4 + 8 = 12: 两个 grid_* 元素加起来正好是 12 列,所以它们会自动排列在同一行。
<div class="clear"></div>: 这是一个非常重要的技巧，因为 .grid_4 和 .grid_8 都是浮动元素，它们会影响后面的 grid_12（页脚）。.clear 类通过 clear: both 清除浮动，确保页 footer 能正常显示在下方。

保存文件并在浏览器中打开,你就能看到一个整齐的两栏布局。

高级技巧：嵌套网格

你可以在一个网格单元内再创建另一个网格系统,这就是嵌套。

我们想在主内容区（.grid_8）内部再创建一个两栏布局（文章和摘要）。

<!-- 主内容区: 占用 8 列 -->
<div class="grid_8">
    <div class="main-content">
        <h2>主内容区</h2>
        <p>这是一个嵌套网格的示例。</p>
        <!-- 在 grid_8 内部再创建一个 container_12 (或更小的) -->
        <div class="container_12">
            <!-- 文章区: 占用 7 列 -->
            <div class="grid_7">
                <p>这是文章内容，宽度为 7 列。</p>
            </div>
            <!-- 摘要区: 占用 5 列 -->
            <div class="grid_5">
                <p>这是摘要内容，宽度为 5 列。</p>
            </div>
            <!-- 清除内部浮动 -->
            <div class="clear"></div>
        </div>
    </div>
</div>

注意: 内部的 .container_12 宽度会相对于它的父级（.grid_8）进行计算，而不是相对于整个页面,这提供了极大的布局灵活性。

现代替代方案：响应式设计与 Flexbox/Grid

960 Grid System 的时代已经过去，现代 Web 开发使用更灵活、更强大的技术。

响应式设计

核心思想: 使用相对单位（如 , vw, rem）和媒体查询。
如何工作: 布局不再是固定的 960px，你可以设置一个容器 width: 95%，然后通过媒体查询在不同屏幕尺寸下改变列数或布局方式（如从三栏变为单栏）。
代表框架: Bootstrap 和 Foundation，它们结合了网格系统和响应式设计,是目前最主流的解决方案。

CSS Flexbox

核心思想: 一维布局模型，非常适合在一行内排列元素（如导航栏、卡片列表）。
优势: 非常灵活，可以轻松实现居中、等高、按比例分配空间等复杂布局,代码更简洁。

CSS Grid

核心思想: 二维布局模型,可以同时控制行和列。
优势: 被誉为“布局的未来”，可以创建以前无法实现的复杂布局（如杂志版式）,代码极其简洁和直观。

如果你现在开始一个新项目，强烈建议学习 Flexbox 和 CSS Grid，并结合媒体查询来实现响应式设计，它们比 960 Grid System 更强大、更灵活、更符合现代 Web 标准。

960 Grid System 的今天

960 Grid System 是 Web 开发历史上的一个重要里程碑，它教会了无数开发者“网格化布局”的思想,极大地推动了网页设计的发展。

由于其固定宽度和非响应式的本质，它已经不再适用于现代多设备的世界，学习 960 Grid System 更多的是为了了解历史和理解网格布局的基本原理，这些原理在今天的 Bootstrap、Flexbox 和 Grid 中依然存在,只是以更先进的形式呈现。

希望这份教程能帮助你彻底理解 960 Grid System！

960网格系统怎么用？

960 Grid System 教程：从零开始掌握经典布局框架

目录

什么是 960 Grid System？

为什么要使用它？它的优缺点

优点

缺点

核心概念：列、槽 和 Gutter

如何使用 960 Grid System？（实战步骤）

下载框架文件

理解 CSS 文件

在 HTML 中应用类名

高级技巧：嵌套网格

现代替代方案：响应式设计与 Flexbox/Grid

响应式设计

CSS Flexbox

CSS Grid

960 Grid System 的今天

核心概念：列、槽和 Gutter