如何为Flex布局表格的网格线添加标签？

问题背景 #

现有以下CSS和HTML代码，实现了一个2x2的Flex网格：

CSS代码 #

.flex {
  font: 14px Arial;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 1 auto;
  width: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  text-align: center;
  line-height: 20px;
  padding: 5px;
}

HTML代码 #

<div class="flex">
  <div>{data['player1-pre']}</div>
  <div>{data['player2-pre']}</div>
  <div>{data['player1-post']}</div>
  <div>{data['player2-post']}</div>
</div>

希望给这个网格添加行列标签（类似行标签Player1/Player2、列标签Pre/Post），实现类似带表头的表格效果。

解决方案：使用CSS Grid布局 #

CSS Grid天生适合这种带行列标题的结构化布局，比Flex更直观易维护，以下是完整实现代码：

完整代码 #

CSS

.grid-container {
  font: 14px Arial;
  display: grid;
  /* 定义列：第一列是行标签，后两列是内容列 */
  grid-template-columns: auto 1fr 1fr;
  /* 定义行：第一行是列标签，后两行是内容行 */
  grid-template-rows: auto 1fr 1fr;
  /* 合并边框，避免重复线条 */
  border-collapse: collapse;
}

.grid-item {
  border: 1px solid black;
  text-align: center;
  line-height: 20px;
  padding: 5px;
}

/* 表头样式：加粗+浅背景 */
.grid-header {
  font-weight: bold;
  background-color: #f5f5f5;
}

/* 左上角空单元格，去掉边框 */
.empty-corner {
  border: none;
  background-color: transparent;
}

HTML

<div class="grid-container">
  <!-- 左上角空白占位 -->
  <div class="grid-item empty-corner"></div>
  <!-- 顶部列标签 -->
  <div class="grid-item grid-header">Pre</div>
  <div class="grid-item grid-header">Post</div>
  
  <!-- 第一行内容 + 左侧行标签 -->
  <div class="grid-item grid-header">Player 1</div>
  <div class="grid-item">{data['player1-pre']}</div>
  <div class="grid-item">{data['player1-post']}</div>
  
  <!-- 第二行内容 + 左侧行标签 -->
  <div class="grid-item grid-header">Player 2</div>
  <div class="grid-item">{data['player2-pre']}</div>
  <div class="grid-item">{data['player2-post']}</div>
</div>

方案说明 #

1. Grid结构定义：通过grid-template-columns和grid-template-rows明确划分出标签区域和内容区域，布局逻辑清晰
2. 视觉区分：用grid-header类给标签添加加粗和背景色，让表头和内容一目了然
3. 边框优化：使用border-collapse: collapse让网格边框合并，避免出现双线条

如果一定要用Flex实现，需要嵌套多层Flex容器，但代码复杂度会更高，Grid是更优的选择。

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