css - 如何使css网格从3列切换到2列+下面的1列全宽？

Question

我有一个可以采用不同网格布局的行组件。其中一行有 3 列。切换到平板断点时，我需要切换到两行布局：2 列 + 1 列占据全宽。

const RowTemplate = {
  TwoLeft: { desktop: "2fr 1fr", tablet: "repeat(2, 1fr)", mobile: "1fr" },
  Three: { desktop: "repeat(3, 1fr)", tablet: "repeat(2, 1fr)", mobile: "1fr" },
};

const Row = styled.div<{
  format: { desktop: string; tablet: string; mobile: string };
}>`
  display: grid;
  @media (min-width: 400px) {
    grid-template-columns: ${({ format }) => format.mobile};
    > &:last-child {
      grid-template-columns: 1fr;
    }
  }
  @media (min-width: 800px) {
    grid-template-columns: ${({ format }) => format.tablet};
  }
  @media (min-width: 1200px) {
    grid-template-columns: ${({ format }) => format.desktop};
  }
`;

export default function Dashboard() {
return (
 <Row format={RowTemplate.Three}>
          <Column1/>
          <Column2/>
          <Column3/>
          <Tile
        </Row>
)
}

目前，最后一列进入第二行，但仅占其宽度的 50%。如何解决这个问题？

标签： cssreactjscss-grid