响应式网格布局能够根据设备屏幕尺寸自动调整网格的列数、行高和间距，让页面内容在不同设备上都能保持良好的展示效果，是前端开发中非常实用的布局能力。
核心实现方案
目前css实现响应式网格布局主要有两种主流方案，分别是CSS Grid布局和flexbox布局，两种方案适用场景略有不同，开发者可以根据实际需求选择。
方案一：使用CSS Grid实现
CSS Grid是css原生提供的二维布局系统，非常适合实现网格布局，通过几个核心属性就能快速完成响应式适配。
核心属性说明
- grid-template-columns：定义网格的列宽，支持使用fr单位、百分比、固定像素等
- grid-gap：定义网格之间的间距，包括行间距和列间距
- repeat()：重复定义相同的列或行，减少重复代码
- minmax()：定义尺寸的最小值和最大值，配合自适应逻辑使用
- auto-fill/auto-fit：自动填充网格列数，是实现响应式的核心属性
完整代码示例
下面是一个适配多屏幕的响应式网格布局示例，网格列数会随屏幕宽度自动调整：
/* 容器样式 */
.grid-container {
display: grid;
/* 自动填充列，每列最小200px，最大1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 网格间距16px */
grid-gap: 16px;
padding: 16px;
}
/* 网格项样式 */
.grid-item {
background-color: #f0f0f0;
border-radius: 8px;
padding: 20px;
text-align: center;
min-height: 120px;
}
/* 小屏幕适配，调整间距 */
@media (max-width: 768px) {
.grid-container {
grid-gap: 12px;
padding: 12px;
}
}
对应的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>
方案二：使用flexbox实现
flexbox是一维布局系统，也可以通过结合flex-wrap和百分比宽度实现响应式网格效果，适合简单的网格场景。
实现逻辑
给容器设置display: flex和flex-wrap: wrap，让子项可以自动换行，再通过百分比或者calc()计算子项宽度，结合媒体查询调整不同屏幕下的子项占比。
完整代码示例
下面是一个flexbox实现的响应式网格示例，大屏幕每行4个，中等屏幕每行2个，小屏幕每行1个：
/* 容器样式 */
.flex-grid-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
/* 网格项基础样式 */
.flex-grid-item {
/* 大屏幕每行4个，减去间距占比 */
flex: 0 0 calc(25% - 12px);
background-color: #e8f4fd;
border-radius: 8px;
padding: 20px;
text-align: center;
min-height: 120px;
}
/* 中等屏幕适配，每行2个 */
@media (max-width: 992px) {
.flex-grid-item {
flex: 0 0 calc(50% - 8px);
}
}
/* 小屏幕适配，每行1个 */
@media (max-width: 576px) {
.flex-grid-item {
flex: 0 0 100%;
}
}
对应的html结构和CSS Grid方案类似，只需要修改类名即可：
<div class="flex-grid-container">
<div class="flex-grid-item">网格项1</div>
<div class="flex-grid-item">网格项2</div>
<div class="flex-grid-item">网格项3</div>
<div class="flex-grid-item">网格项4</div>
</div>
两种方案的选择建议
如果是复杂的二维网格布局，比如需要控制行高、网格项跨行跨列的场景，优先选择CSS Grid方案，代码更简洁，适配逻辑更清晰。如果是简单的一维网格，不需要复杂的行控制，flexbox方案也能满足需求，兼容性也更好一些。
实际开发中也可以结合两种方案使用，比如外层用flexbox做整体布局，内层用CSS Grid做局部的网格模块，充分发挥两种布局的优势。