当前位置：首页 > 前端开发 > 正文

如何用html制作九宫格

admin
前端开发
2025-08-24
6

HTML的“创建容器，结合CSS网格或flex布局分割为九等份，即可制作九宫格

是几种用 HTML 制作九宫格的方法，每种都有其特点和适用场景,掌握这些技术可以帮助你根据项目需求选择最合适的实现方式。

使用表格（Table）实现

这是最传统且直观的方式之一，通过定义一个包含3行、每行3列的<table>元素，可以轻松构建出标准的九宫结构，每个单元格内可放置文字、图片或其他内容,以下是具体步骤及示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">九宫格 Table版</title>
    <style>
        table { border-collapse: collapse; margin: auto; } / 合并边框并居中显示 /
        td { width: 100px; height: 100px; border: 1px solid #000; text-align: center; vertical-align: middle; } / 设置单元格尺寸与对齐方式 /
    </style>
</head>
<body>
    <table>
        <!-第一行 -->
        <tr>
            <td>格子1</td>
            <td>格子2</td>
            <td>格子3</td>
        </tr>
        <!-第二行 -->
        <tr>
            <td>格子4</td>
            <td>格子5</td>
            <td>格子6</td>
        </tr>
        <!-第三行 -->
        <tr>
            <td>格子7</td>
            <td>格子8</td>
            <td>格子9</td>
        </tr>
    </table>
</body>
</html>

此方法优点是简单易懂，天然形成网格布局；但缺点在于语义化较差（表格本应用于数据展示而非布局）,且难以实现复杂的响应式设计。

利用CSS Grid布局（推荐现代方案）

CSS Grid是专门用于二维布局的强大工具，非常适合创建精确控制的九宫格系统，它基于容器划分行列，子项自动填充到指定位置,以下是完整实现过程：

如何用html制作九宫格第1张

HTML结构搭建：仅需一个父级容器包裹9个独立的<div>作为子项。

<div class="grid-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
</div>

关键CSS样式配置：

.grid-container {
 display: grid;          / 启用网格模式 /
 grid-template-columns: repeat(3, 1fr); / 三等分列宽 /
 gap: 5px;               / 设置间距避免重叠 /
 width: 300px;           / 固定宽度或百分比自适应 /
 margin: 0 auto;         / 水平居中对齐 /
}
.item {
 background-color: lightblue; / 背景色区分区域 /
 border-radius: 8px;      / 圆角美化效果 /
 padding: 10px;           / 内边距增加呼吸感 /
 text-align: center;      / 文本居中显示 /
 line-height: 80px;       / 垂直居中辅助线高 /
}

这种方法的优势在于高度灵活——支持动态调整行列比例、轻松设置间隙大小，并能完美适配不同屏幕尺寸，例如修改grid-template-columns为百分比值即可实现响应式缩放。

Flexbox替代方案

虽然不如Grid直观，但Flexbox也能模拟类似效果，核心思路是将父容器设为弹性盒子，然后强制换行形成多列排列，需要注意手动计算换行动作带来的影响,典型代码如下：

.flex-container {
    display: flex;
    flex-wrap: wrap;        / 允许子项折行 /
    width: 300px;           / 总宽度约束 /
}
.flex-item {
    flex: 0 0 calc(33.33% 5px); / 精确控制每个项目的可用空间 /
    box-sizing: border-box; / 确保边框计入总宽 /
    margin-bottom: 5px;     / 底部外边距充当间隔 /
}

不过由于涉及复杂的宽度计算,实际开发中更推荐使用Grid布局。