如何实现2x2/3x3卡片布局 解决卡片仅单行渲染的问题

方案1：CSS Grid实现（推荐，适合固定2x2/3x3布局） #

直接修改style.css中卡片父容器的样式：

• 2x2布局配置：

/* 替换为你实际的卡片父容器类名 */
.card-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px; /* 卡片间距可自行调整 */
  width: 100%;
  box-sizing: border-box;
}

• 3x3布局配置，仅需修改grid-template-columns和grid-template-rows的数值即可：

.card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

方案2：Flex布局实现（兼容性更强） #

• 父容器样式配置：

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

• 单个卡片样式配置：

/* 替换为你实际的卡片类名 */
.card-item {
  box-sizing: border-box;
  /* 2x2布局用下面的宽度配置 */
  width: calc(50% - 8px);
  /* 3x3布局就替换为 width: calc(33.33% - 11px); 数值根据gap大小调整即可 */
}

注意事项 #

• 确认父容器没有设置固定宽度导致无法容纳多列卡片
• 单个卡片不要设置过大的固定宽度，避免超出单列可容纳范围

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