使用网格从左到右流动图像时出现问题（即 1、2、3、4……更多）

Question

使用网格从左到右流动图像时出现问题。一些图像没有按照图像中显示的数字从左向右流动（例如第 5 张图像应该出现在图像 6 之前。与图像 9 相同）。图片应从左到右显示数字

这是我的代码沙盒代码https://codesandbox.io/s/nice-ives-ewfljj?file=/src/App.tsx

注意：此代码在 gridTemplateColumns: "repeat(3, 1fr)" 时工作正常，但在 gridTemplateColumns: "repeat(4, 1fr)" 时出现问题

请帮我解决问题，实现如下格式：

移动视图看起来与桌面视图略有不同，其中卡片 4 出现在卡片 3 的位置，并且卡片 8 出现在卡片 7 的位置，如下图所示：

Answer 1

已更新

如果目标是将 3 列布局转换为 4 列，我认为迭代中有条件的样式可能比

nth-of-type

条件更灵活，并且它还增加了对更复杂条件的支持。

以下示例在组件中使用条件样式来创建所需的布局。项目中使用的

glitz

库似乎支持组件上带有

css

道具的动态样式，这可能也可以用来替换这里的

style

道具。

经过修改的分叉演示：codesandbox

interface imageItem {
  id: string;
  url: string;
}

const ImageWrapper = styled.div({
  overflow: "hidden",
  position: "relative",
  borderRadius: "20px",
  gridRowStart: "span 2",
  gridColumnStart: "auto"
});

export default function App() {
  return (
    <Wrapper>
      {imageList.map((image, index) => {
        return (
          <ImageWrapper
            key={image.id}
            style={{
              gridRow: [2, 4, 5, 7].includes((index + 1) % 8)
                ? "span 3"
                : "span 2",
              gridColumn: (index + 1) % 8 === 6 ? "2" : "auto"
            }}
          >
            <ImageStyled src={image.url} alt={image.url} />
            <h4 style={{ position: "absolute", top: "16px", color: "red" }}>
              {image.id}
            </h4>
          </ImageWrapper>
        );
      })}
    </Wrapper>
  );
}