能否使用CSS Grid复刻传统表格的空间分配行为？

需求说明 #

我有一个包含两列多行的表格，其中一列内容通常多于另一列。希望用CSS Grid替代表格，实现两个核心需求：

• 空闲空间大致按指定比例（比如2:1）分配，同时保留传统表格中“列宽适配内容最小宽度”的特性
• 窄屏状态下单元格自动垂直堆叠

尝试过grid-template-columns: auto auto，但剩余空间会被平均分配；2fr 1fr则固定了比例，忽略了内容的最小宽度；也没有2auto 1auto这种写法。用表格加媒体查询修改display的方式不够优雅，想知道仅用CSS Grid能否实现。

解决方案 #

可以通过minmax()函数结合min-content和fr单位实现，既保证列的最小宽度由内容决定，剩余空间又能按指定比例分配。同时通过媒体查询修改grid-template-columns实现响应式堆叠，无需修改元素的display属性。

完整代码示例

/* 核心Grid布局 */
.grid {
  display: grid;
  /* 每列最小宽度为内容最小宽度，剩余空间按2:1分配 */
  grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 1fr);
  gap: 5px;
  border: 1px solid blue;
  padding: 5px;
  margin-bottom: 1rem;
}

.grid > * {
  border: 1px solid blue;
  padding: 5px;
}

/* 窄屏响应式堆叠 */
@media (max-width: 400px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* 对比用的传统表格样式 */
table {
  border: 1px solid red;
  width: 100%;
  border-spacing: 5px;
}

td {
  border: 1px solid red;
  padding: 5px;
}

<p>CSS Grid实现的目标布局：</p>
<div class="grid">
  <div>This cell has more, more, more, more, more, more, more content</div>
  <div>Less content here</div>
  <div>Another long content cell that needs extra space for proper display</div>
  <div>Short text</div>
</div>

<p>对比：传统表格的空间分配效果</p>
<table>
  <tr>
    <td>This cell has more, more, more, more, more, more, more content</td>
    <td>Less content here</td>
  </tr>
  <tr>
    <td>Another long content cell that needs extra space for proper display</td>
    <td>Short text</td>
  </tr>
</table>

原理说明

• minmax(min-content, 2fr)：定义列的尺寸范围，最小宽度为内容的最小宽度（min-content，即内容不换行时的宽度），最大宽度按2份比例分配容器的剩余空间（2fr）
• 媒体查询中设置grid-template-columns: 1fr，让所有单元格自动堆叠成单列，这种方式比修改表格元素的display属性更符合CSS布局的语义化原则

内容的提问来源于stack exchange，提问作者Paul