如何在CSS中实现栅格系统布局 自定义网格与Grid应用

栅格系统布局是将页面划分为等宽的列和行，通过预设的规则组合排列内容区域的布局方案，在响应式页面开发中应用十分广泛。CSS Grid布局是CSS3推出的二维布局模块，能够直接控制行和列的维度，非常适合用来实现各类栅格系统。

栅格系统的基础概念

标准的栅格系统通常包含几个核心要素：

• 容器：承载所有栅格内容的父元素
• 行（row）：横向的内容分组，用于包裹列元素
• 列（col）：纵向的内容单元，通过占比分配宽度
• 槽（gutter）：列与列之间的间距，避免内容紧贴
• 总列数：栅格系统划分的总列数量，常见为12列或24列

使用CSS Grid实现基础栅格

Grid布局通过给容器设置display: grid开启网格模式，再通过相关属性定义行列规则，下面是实现12列基础栅格的示例代码：

/* 栅格容器基础样式 */
.grid-container {
    display: grid;
    /* 定义12列，每列等宽 */
    grid-template-columns: repeat(12, 1fr);
    /* 定义行高，自动填充 */
    grid-auto-rows: minmax(50px, auto);
    /* 列之间的槽宽 */
    column-gap: 20px;
    /* 行之间的槽宽 */
    row-gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* 列的基础样式 */
.grid-col {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
}

/* 不同占比的列样式 */
.col-3 {
    /* 占据3列宽度 */
    grid-column: span 3;
}
.col-6 {
    grid-column: span 6;
}
.col-12 {
    grid-column: span 12;
}

对应的HTML结构如下：

<div class="grid-container">
    <div class="grid-col col-12">占据12列</div>
    <div class="grid-col col-6">占据6列</div>
    <div class="grid-col col-6">占据6列</div>
    <div class="grid-col col-3">占据3列</div>
    <div class="grid-col col-3">占据3列</div>
    <div class="grid-col col-3">占据3列</div>
    <div class="grid-col col-3">占据3列</div>
</div>

自定义网格规则的高级应用

自定义列宽与占比

Grid的grid-template-columns属性支持多种赋值方式，可以根据需求自定义列宽规则，比如设置前三列固定宽度，剩余列自适应：

.custom-grid {
    display: grid;
    /* 第一列200px，第二列150px，第三列100px，剩余列等分剩余空间 */
    grid-template-columns: 200px 150px 100px repeat(auto-fit, minmax(80px, 1fr));
    column-gap: 15px;
    row-gap: 15px;
}

网格区域分配

通过grid-template-areas可以定义网格区域，实现更复杂的布局组合，比如常见的页头、侧边栏、主内容、页脚布局：

.layout-grid {
    display: grid;
    /* 定义3行3列的网格区域 */
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    /* 定义列宽 */
    grid-template-columns: 200px 1fr 1fr;
    /* 定义行高 */
    grid-template-rows: 60px 1fr 50px;
    min-height: 100vh;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #4a90e2;
}

.sidebar {
    grid-area: sidebar;
    background-color: #f5f5f5;
}

.main {
    grid-area: main;
    background-color: #fff;
}

.footer {
    grid-area: footer;
    background-color: #333;
    color: #fff;
}

对应的HTML结构：

<div class="layout-grid">
    <div class="header">页头</div>
    <div class="sidebar">侧边栏</div>
    <div class="main">主内容区</div>
    <div class="footer">页脚</div>
</div>

响应式栅格适配

结合媒体查询可以调整不同屏幕尺寸下的栅格规则，实现响应式效果：

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 20px;
}

/* 平板尺寸下改为6列栅格 */
@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 手机尺寸下改为2列栅格 */
@media (max-width: 480px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Grid栅格与传统实现方式对比

注意事项

• Grid容器的子元素默认会成为网格项，不需要额外设置浮动或定位属性
• 设置gap属性时，间距不会算入网格项的总宽度，避免传统盒模型的计算问题
• 如果需要兼容旧浏览器，可以搭配flex布局作为降级方案，优先使用Grid提升开发效率
• 自定义网格时尽量避免过度复杂的规则，保持栅格的可维护性和可读性

CSS_grid栅格系统自定义网格网格布局修改时间：2026-06-11 08:30:35