React项目中如何实现每行最多20座的固定座位预订布局

核心思路 #

要实现固定每行20个座位、窗口resize时布局不变，关键是让座位行的宽度固定（刚好容纳20个座位），外层容器处理横向溢出（出现滚动条），避免布局受窗口宽度影响。

具体实现方案 #

方案1：Flex布局（推荐）

给每个座位行设置固定宽度，外层容器允许横向滚动：

1. 给<Chair>组件设置固定宽高和间距：

.Chair {
  width: 30px;
  height: 30px;
  margin: 0 2px; /* 左右间距，按需调整 */
  /* 补充样式：背景色、边框、选中状态等 */
}

2. 给每个包裹<Chair>的div（座位行）设置固定宽度（刚好放下20个Chair，包含间距）：

.seat-row {
  display: flex;
  width: calc(20*(30px + 4px)); /* 30px为Chair宽度，4px是左右margin总和 */
  margin: 8px 0; /* 行间距 */
}

3. 外层<Section>设置横向滚动：

Section {
  overflow-x: auto;
  padding: 16px;
}

方案2：Grid布局（修正之前的问题）

如果想用Grid，避免使用auto-fit/auto-fill，固定列数和列宽：

1. 给座位行（Grid容器）设置固定列数和列宽：

.seat-row {
  display: grid;
  grid-template-columns: repeat(20, 30px); /* 固定20列，每列30px */
  gap: 4px; /* 座位之间的间距 */
  width: calc(20*(30px + 4px)); /* 固定行宽 */
  margin: 8px 0;
}

2. 同样给<Section>设置overflow-x: auto;，处理窗口过窄的情况。

关键注意点 #

• 不要用百分比宽度或flex-wrap: wrap，否则窗口变窄时座位会换行，破坏选座逻辑。
• 固定宽度时要把座位的间距（margin/gap）算进去，确保20个座位刚好填满一行。
• 外层容器的overflow-x: auto保证窗口宽度不足时，用户可以横向滚动查看所有座位，布局不会错乱。

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