如何通过css grid实现多行多列组合布局

CSS Grid是CSS3推出的二维布局系统，能够同时处理行和列的维度，非常适合实现多行多列的组合布局，相比传统布局方式减少了大量冗余代码，布局逻辑也更清晰。

CSS Grid核心基础属性

要实现多行多列组合布局，首先需要掌握几个核心的Grid属性，这些属性是构建布局的基础。

容器属性

• display: grid：将元素定义为Grid容器，内部子元素自动成为Grid项目
• grid-template-columns：定义列的轨道尺寸，可设置固定值、百分比、fr单位等
• grid-template-rows：定义行的轨道尺寸，取值规则和列一致
• gap：设置行与行、列与列之间的间距，可分别设置row-gap和column-gap
• grid-template-areas：通过区域命名的方式组合行列布局

项目属性

• grid-column：指定项目占据的列范围，格式为start / end
• grid-row：指定项目占据的行范围，格式和grid-column一致
• grid-area：指定项目对应的区域名称，配合grid-template-areas使用

基础多行多列等分布局实现

最常见的需求是实现固定列数的等分布局，比如3列等宽的多行布局，代码如下：

/* 容器样式 */
.grid-container {
    display: grid;
    /* 定义3列，每列占1份剩余空间，实现等宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 行高自动根据内容调整，也可设置固定值 */
    grid-auto-rows: 120px;
    /* 列间距和行间距都是15px */
    gap: 15px;
    padding: 20px;
    background-color: #f5f5f5;
}

/* 项目样式 */
.grid-item {
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 16px;
}

对应的HTML结构如下：

<div class="grid-container">
    <div class="grid-item">项目1</div>
    <div class="grid-item">项目2</div>
    <div class="grid-item">项目3</div>
    <div class="grid-item">项目4</div>
    <div class="grid-item">项目5</div>
    <div class="grid-item">项目6</div>
</div>

上述代码中repeat(3, 1fr)表示重复3次1fr的单位，fr是Grid特有的单位，代表剩余空间的分配比例，这里3列各占1份，实现等宽效果。当项目数量超过3个时，会自动换行生成新的行，满足多行多列的需求。

不规则多行多列组合布局实现

实际开发中经常需要实现部分项目跨列、跨行的组合布局，比如头部通栏、侧边栏加内容区的布局，可通过grid-column和grid-row属性实现。

以下是一个包含通栏头部、侧边栏、主内容区、底部通栏的布局案例：

.composite-grid {
    display: grid;
    /* 定义3列：侧边栏200px，主内容区占剩余2份，右侧边栏100px */
    grid-template-columns: 200px 2fr 100px;
    /* 定义3行：头部60px，内容区自动高度，底部50px */
    grid-template-rows: 60px auto 50px;
    /* 行列间距 */
    gap: 10px;
    height: 500px;
    padding: 10px;
    background-color: #eee;
}

/* 头部通栏，占据第1行，从第1列到第4列（列数+1） */
.header {
    grid-column: 1 / 4;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

/* 左侧边栏，占据第2行第1列 */
.sidebar-left {
    grid-row: 2 / 3;
    background-color: #8bc34a;
    padding: 15px;
    color: white;
}

/* 主内容区，占据第2行第2列 */
.main-content {
    grid-row: 2 / 3;
    background-color: white;
    padding: 20px;
}

/* 右侧边栏，占据第2行第3列 */
.sidebar-right {
    grid-row: 2 / 3;
    background-color: #ff9800;
    padding: 15px;
    color: white;
}

/* 底部通栏，占据第3行，从第1列到第4列 */
.footer {
    grid-column: 1 / 4;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

对应的HTML结构：

<div class="composite-grid">
    <div class="header">页面头部</div>
    <div class="sidebar-left">左侧边栏</div>
    <div class="main-content">主内容区域</div>
    <div class="sidebar-right">右侧边栏</div>
    <div class="footer">页面底部</div>
</div>

这里grid-column: 1 / 4表示项目从第1列开始，到第4列结束，也就是占据全部3列，实现通栏效果。grid-row的取值同理，通过指定起始和结束的行号，可控制项目占据的行范围。

使用grid-template-areas实现语义化布局

除了通过行列号指定范围，还可以通过grid-template-areas定义区域，再给项目指定区域名称，这种方式布局逻辑更直观，可读性更强。

上述通栏布局用区域命名的方式实现代码如下：

.semantic-grid {
    display: grid;
    grid-template-columns: 200px 2fr 100px;
    grid-template-rows: 60px auto 50px;
    gap: 10px;
    height: 500px;
    padding: 10px;
    background-color: #eee;
    /* 定义区域，每行对应一个字符串，相同名称的区域会合并 */
    grid-template-areas:
        "header header header"
        "sidebar-left main sidebar-right"
        "footer footer footer";
}

.header {
    grid-area: header;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.sidebar-left {
    grid-area: sidebar-left;
    background-color: #8bc34a;
    padding: 15px;
    color: white;
}

.main-content {
    grid-area: main;
    background-color: white;
    padding: 20px;
}

.sidebar-right {
    grid-area: sidebar-right;
    background-color: #ff9800;
    padding: 15px;
    color: white;
}

.footer {
    grid-area: footer;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

这种方式不需要记住行列号，只需要在grid-template-areas中按行列结构写出区域名称，再给对应项目设置grid-area即可，布局调整时只需要修改区域定义，不需要逐个修改项目的行列属性，维护成本更低。

响应式多行多列布局适配

多行多列布局还需要适配不同屏幕尺寸，比如大屏幕显示3列，中等屏幕显示2列，小屏幕显示1列，可通过媒体查询配合Grid属性实现。

.responsive-grid {
    display: grid;
    gap: 15px;
    padding: 20px;
}

/* 小屏幕：默认1列 */
.responsive-grid {
    grid-template-columns: 1fr;
}

/* 中等屏幕：2列 */
@media (min-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 大屏幕：3列 */
@media (min-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.responsive-item {
    background-color: #4a90e2;
    color: white;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

这种响应式实现方式只需要修改grid-template-columns的取值，不需要调整项目属性，比传统浮动布局的响应式适配简单很多。

常见问题与注意事项

• Grid容器的子元素才会成为Grid项目，孙子元素不会受Grid布局影响，除非也给孙子元素设置display: grid
• fr单位和固定单位可以混合使用，比如grid-template-columns: 200px 1fr 2fr表示第一列固定200px，剩下空间按1:2分配给后两列
• 如果项目设置了grid-column或grid-row超出了定义的行列范围，Grid会自动创建隐式轨道，可通过grid-auto-columns和grid-auto-rows设置隐式轨道的尺寸
• Grid布局的兼容性目前覆盖所有现代浏览器，如果需要兼容非常旧的浏览器版本，需要搭配降级方案使用

CSS_grid网格布局多行多列布局前端布局修改时间：2026-06-12 12:18:44