HTML/CSS布局优化：如何实现每两个article卡片自动换行？

当前所有卡片挤在同一行的核心原因：

• 容器.tiles_bodyLOB设置了display: flex但未开启换行，且错误混用了Grid布局属性（grid-template-columns对flex容器无效）
• 卡片.tile-styleLOB设置了min-width: 600px，过宽的固定最小宽度导致容器无法触发换行

下面提供两种可行的解决方案：

方案一：使用Grid布局（推荐） #

Grid天生适配行列规整的布局，直接修正容器属性并调整卡片宽度：

.tiles_bodyLOB {
  /* 将display:flex替换为grid，启用Grid布局 */
  display: grid;
  /* 自动适配列数：每列最小280px，超出后均分空间 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.25rem;
  padding: 1rem;
  border-radius: 8px;
  /* 响应式调整：小屏幕自动切换为单列 */
  @media (max-width: 700px) {
    grid-template-columns: 1fr;
  }
}

.tile-styleLOB {
  background-color: red;
  min-height: 200px;
  transition: 0.25s ease;
  &:hover {
    transform: translateY(-5px);
  }
  &:focus-within {
    box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
  }
  /* 移除固定min-width，由Grid自动分配宽度 */
  /* min-width: 600px; */
}

/* 其余CSS保持不变 */
.a-tag:link {
  color: white;
}

.a-tag:hover {
  color: white;
}

.a-tag:visited {
  color: white;
}

说明：repeat(auto-fit, minmax(280px, 1fr))会根据容器宽度自动调整列数，新增卡片会自动按规则换行，同时保证小屏幕下的单列显示。

方案二：使用Flex布局 #

若偏好Flex布局，只需开启换行并设置卡片合适宽度：

.tiles_bodyLOB {
  display: flex;
  /* 开启自动换行 */
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
  padding: 1rem;
  border-radius: 8px;
  /* 响应式调整：小屏幕切换为单列 */
  @media (max-width: 700px) {
    flex-direction: column;
  }
}

.tile-styleLOB {
  background-color: red;
  min-height: 200px;
  transition: 0.25s ease;
  &:hover {
    transform: translateY(-5px);
  }
  &:focus-within {
    box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
  }
  /* 设置每两个一行：宽度占50%并减去间距的一半，避免溢出 */
  flex: 0 1 calc(50% - 0.5rem);
  /* 最小宽度保证小屏幕显示正常 */
  min-width: 280px;
}

/* 其余CSS保持不变 */
.a-tag:link {
  color: white;
}

.a-tag:hover {
  color: white;
}

.a-tag:visited {
  color: white;
}

说明：flex-wrap: wrap触发自动换行，flex: 0 1 calc(50% - 0.5rem)确保卡片默认占容器宽度的一半，新增卡片会自动适配布局。

HTML部分无需修改，保持原有结构即可。

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