响应式 CSS 网格，具有固定行和最大列，但可以显示更多项目

Question

我正在尝试创建一个布局为 2 行 x 列的网格组件。列最多可以有 6 个，并且网格项是未知数量的反应子项，因此有 x 列。

我得到了a网格，但我不确定如何处理最后一个项目，因为它需要是一个按钮，单击后会显示更多网格项目。

这就是我现在的网格：

const gridOverflowStyles = css`
  overflow-y: hidden;
  grid-auto-rows: 0;
  grid-template-rows: repeat(2, 1fr);
  justify-content: space-between;
`;

type GridProps = {
    gridItemArr: gridItem[];
}

const Grid = styled.div<GridProps>`
  display: grid;
  gap: var(--spacing-xs) var(--spacing-2xs);
  grid-template-columns: repeat(auto-fit, 170px);

  /* a media query function */
  ${MQ("desktop")} {
    grid-template-columns: repeat(auto-fit, 200px);
  }

  ${({ gridItemArr }) =>
    gridItemArr.length > 11 && gridOverflowStyles}
`;

React 组件看起来像这样：

const arr = Array.from(
  { length: 12 },
  () => gridItemsArr
);

<Grid>
  {arr.map((item, index) => (
    <GridItem
      key={index}
    />
  ))}
</Grid>

在 arr.lenght 为 12 时，网格组件在全屏宽度上显示 2x6 项目，但在较小的屏幕上会下降到 2x5 到 2x4 和 2x3，因为 GridItems 具有固定的最大宽度，并且在所有这些不同的视口上，最后一个项目在grid 需要是一个按钮，用于展开网格以显示所有 12 个 GridItems。

我正在使用 Emotion 风格的组件、React 和 TypeScript。

我尝试查找使用网格和定位网格项的不同方法，但找不到适合我的特定问题的解决方案。最有可能的是因为我是一名初级前端开发人员。

Answer 1

解决了！通过向按钮添加网格区域样式

const ShowAllButton = styled(Button.SquareButton)`
  grid-area: 2 / -2 / 2 / -1;
`;