如何用css Grid实现响应式表格布局

.grid-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列均分 */
  gap: 1px;
  background: #ddd;
}
<p>.grid-row {
display: contents; /<em> 让子元素直接参与网格布局 </em>/
}</p><p>.grid-cell {
padding: 12px;
background: white;
border: 1px solid #eee;
}</p>

<div class="grid-table">
  <div class="grid-row">
    <div class="grid-cell">姓名</div>
    <div class="grid-cell">年龄</div>
    <div class="grid-cell">城市</div>
    <div class="grid-cell">职业</div>
  </div>
  <div class="grid-row">
    <div class="grid-cell">张三</div>
    <div class="grid-cell">28</div>
    <div class="grid-cell">北京</div>
    <div class="grid-cell">工程师</div>
  </div>
</div>

@media (max-width: 600px) {
  .grid-table {
    grid-template-columns: 1fr; /* 每行占满宽度 */
  }
<p>.grid-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
}</p><p>/<em> 可选：为每列添加标签提示 </em>/
.grid-cell:nth-child(1)::before { content: "姓名:"; font-weight: bold; }
.grid-cell:nth-child(2)::before { content: "年龄:"; font-weight: bold; }
.grid-cell:nth-child(3)::before { content: "城市:"; font-weight: bold; }
.grid-cell:nth-child(4)::before { content: "职业:"; font-weight: bold; }
}</p>

.grid-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: #ddd;
}