HTML栅格系统的核心是将页面容器划分为固定数量的等宽列，通常默认分为12列，开发者可以通过指定元素占据的列数来安排页面结构，这种方式能让布局更规整，也方便实现响应式适配。
栅格系统的基本原理
栅格系统的运作依赖三个核心概念：容器、行、列。容器是栅格的 outermost 包裹元素，用来限制栅格的最大宽度；行是列的父元素，用来创建水平的列分组；列则是实际放置内容的单元，通过设定占据的列数来控制宽度。比如12列栅格中，一个占据4列的元素宽度就是总宽度的4/12，也就是三分之一。
栅格系统通常会预留间距，也就是列之间的空白区域，避免内容紧贴在一起。间距可以通过给列添加左右内边距实现，同时行元素需要设置负的左右外边距来抵消容器的最边缘间距，保证整体对齐。
基于浮动的栅格实现方式
浮动是实现栅格的早期常用方案，核心是通过float:left让列元素横向排列，再配合百分比宽度设定列占比。
基础代码结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动栅格示例</title>
<style>
/* 容器样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* 行样式，清除浮动并抵消列的内边距 */
.row {
margin: 0 -15px;
overflow: hidden;
}
/* 基础列样式 */
.col {
float: left;
padding: 0 15px;
box-sizing: border-box;
}
/* 12列栅格的宽度类 */
.col-1 { width: 8.333%; }
.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-4">第一列，占4/12宽度</div>
<div class="col col-4">第二列，占4/12宽度</div>
<div class="col col-4">第三列，占4/12宽度</div>
</div>
<div class="row">
<div class="col col-3">占3列</div>
<div class="col col-6">占6列</div>
<div class="col col-3">占3列</div>
</div>
</div>
</body>
</html>
注意事项
- 列的父元素行需要清除浮动，否则会出现高度塌陷问题，上面的代码用
overflow:hidden实现清除浮动 - 列元素需要设置
box-sizing:border-box，保证内边距不会增加元素总宽度，避免换行 - 浮动栅格在响应式适配时需要额外写媒体查询，修改不同屏幕下的列宽度类
基于flexbox的栅格实现方式
flexbox是现代布局的常用方案，相比浮动实现栅格更简单，不需要处理浮动清除和负边距问题，适配性也更好。
基础代码结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex栅格示例</title>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.col {
padding: 0 15px;
box-sizing: border-box;
}
/* flex栅格的宽度通过flex属性设置 */
.col-1 { flex: 0 0 8.333%; }
.col-2 { flex: 0 0 16.666%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.333%; }
.col-6 { flex: 0 0 50%; }
.col-12 { flex: 0 0 100%; }
/* 响应式适配示例，小屏幕下列占满宽度 */
@media (max-width: 768px) {
.col-sm-12 { flex: 0 0 100%; }
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-4 col-sm-12">第一列，大屏占4列，小屏占12列</div>
<div class="col col-4 col-sm-12">第二列，大屏占4列，小屏占12列</div>
<div class="col col-4 col-sm-12">第三列，大屏占4列，小屏占12列</div>
</div>
</div>
</body>
</html>
flex栅格的优势
- 不需要处理浮动相关的问题，代码更简洁
- 可以轻松实现列的对齐、排序、剩余空间分配等效果
- 响应式适配只需要修改flex属性或者添加媒体查询即可，维护成本更低
栅格系统的使用建议
如果是老项目维护，可以沿用已有的浮动栅格方案；如果是新项目开发，优先选择flexbox实现栅格，适配性和开发效率都更高。如果项目使用了前端框架，也可以直接使用框架内置的栅格系统，比如Bootstrap的栅格，本质也是基于上述原理实现的，只需要按照框架的规范添加对应的类名即可。
实际使用时，需要根据设计稿的内容宽度合理选择栅格的列数，不一定非要固定12列，也可以根据需求设置为24列或者其他数量，核心是保证布局的规整性和响应式适配的灵活性。
HTML_grid栅格系统栅格布局CSS_flexbox修改时间：2026-07-23 11:39:34