CSS Grid是CSS中用于二维布局的模块，它通过定义行和列的轨道来组织页面元素，相比传统布局方式，在处理表格这类需要同时控制行和列的场景时更加高效。使用CSS Grid实现响应式表格布局，能够在不同屏幕尺寸下自动调整表格的结构，避免内容溢出或者布局错乱的问题。
CSS Grid核心属性说明
要实现响应式表格布局，首先需要了解几个常用的CSS Grid属性：
- display: grid：将容器定义为网格容器，内部子元素自动成为网格项目。
- grid-template-columns：定义网格的列轨道，可设置固定宽度、百分比或者fr单位（剩余空间分配比例）。
- grid-template-rows：定义网格的行轨道，用法和列轨道类似。
- gap：设置网格项目之间的间距，包含行间距和列间距。
- grid-auto-flow：控制网格项目的排列方式，默认是按行排列。
- @media：媒体查询，用于在不同屏幕尺寸下修改网格的相关属性，实现响应式效果。
基础响应式表格实现步骤
1. 构建表格HTML结构
首先创建一个基础的表格结构，包含表头和表格内容行：
<div class="grid-table">
<div class="table-header">
<div class="header-item">姓名</div>
<div class="header-item">年龄</div>
<div class="header-item">职业</div>
<div class="header-item">城市</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="row-item">张三</div>
<div class="row-item">25</div>
<div class="row-item">前端开发</div>
<div class="row-item">北京</div>
</div>
<div class="table-row">
<div class="row-item">李四</div>
<div class="row-item">30</div>
<div class="row-item">后端开发</div>
<div class="row-item">上海</div>
</div>
<div class="table-row">
<div class="row-item">王五</div>
<div class="row-item">28</div>
<div class="row-item">UI设计</div>
<div class="row-item">广州</div>
</div>
</div>
</div>
2. 添加CSS Grid基础样式
为表格容器设置网格布局，定义列的宽度规则，同时美化表格的视觉效果：
.grid-table {
width: 100%;
max-width: 1200px;
margin: 0 auto;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.table-header {
display: grid;
/* 定义4列，每列占剩余空间的1份 */
grid-template-columns: repeat(4, 1fr);
background-color: #f5f5f5;
font-weight: bold;
text-align: center;
}
.header-item {
padding: 12px 8px;
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
/* 最后一列去掉右边框 */
.header-item:last-child {
border-right: none;
}
.table-body {
display: grid;
/* 每一行都是4列的网格 */
grid-auto-flow: row;
gap: 0;
}
.table-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.row-item {
padding: 10px 8px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.row-item:last-child {
border-right: none;
}
/* 最后一行去掉下边框 */
.table-row:last-child .row-item {
border-bottom: none;
}
3. 添加响应式适配规则
当屏幕尺寸小于768px时，表格的列宽会出现挤压，内容可读性下降，此时可以通过媒体查询调整网格的列规则，让表格在小屏幕下变成可滚动的结构，或者调整列的宽度比例：
/* 屏幕宽度小于768px时的适配规则 */
@media screen and (max-width: 768px) {
.table-header {
/* 保持4列，每列最小宽度120px，剩余空间分配 */
grid-template-columns: repeat(4, minmax(120px, 1fr));
}
.table-row {
grid-template-columns: repeat(4, minmax(120px, 1fr));
}
/* 给表格容器添加横向滚动 */
.grid-table {
overflow-x: auto;
}
}
/* 屏幕宽度小于480px时的适配规则 */
@media screen and (max-width: 480px) {
.header-item, .row-item {
padding: 8px 4px;
font-size: 14px;
}
}
进阶：小屏幕下列转行布局
如果希望在小屏幕下表格不再以行列的形式展示，而是每一行数据都变成独立的卡片样式，每个字段单独占一行，可以调整网格的排列方式：
@media screen and (max-width: 640px) {
.table-header {
/* 小屏幕下隐藏表头，或者调整为垂直排列 */
display: none;
}
.table-row {
/* 每行变成2列的网格，第一列是字段名，第二列是字段值 */
grid-template-columns: 100px 1fr;
gap: 0;
margin-bottom: 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.row-item {
text-align: left;
padding: 8px 12px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
/* 给每个单元格添加伪元素显示字段名 */
.table-row .row-item:nth-child(1)::before {
content: "姓名：";
font-weight: bold;
}
.table-row .row-item:nth-child(2)::before {
content: "年龄：";
font-weight: bold;
}
.table-row .row-item:nth-child(3)::before {
content: "职业：";
font-weight: bold;
}
.table-row .row-item:nth-child(4)::before {
content: "城市：";
font-weight: bold;
}
.row-item:last-child {
border-bottom: none;
}
}
注意事项
- 使用
grid-template-columns时，如果列数较多，建议用repeat()函数简化代码，提升可维护性。 - fr单位和固定宽度、百分比可以混合使用，比如
grid-template-columns: 100px 2fr 1fr，表示第一列固定100px，剩下空间按2:1分配给后两列。 - 响应式调整时，优先使用媒体查询修改网格的列规则，尽量避免修改HTML结构，保持结构和样式分离。
- 如果表格内容动态变化，需要保证网格容器的高度不会异常收缩，可以给网格项目设置最小高度。
CSS Grid的兼容性目前已经覆盖绝大多数现代浏览器，如果需要兼容旧版本浏览器，可以搭配弹性盒布局作为降级方案。