【chakraui】滝(masonry)のようなレイアウトの作り方

はじめに

メモです。いつも忘れる。
react-masonry-cssというライブラリーがあるのですが、レイアウトだけに一個依頼を増やすのはね。。。っていう気持ちです。

書き方

Wrapperのほう

    <Box
    mx={4}
    gap={4}
    sx={{
      columnCount: {
        lg: 1,
        xl: 2,
        '2xl': _dummyInfoCards.length > 6 ? 3 : 2,
      },
      columnGap: 4,
    }}
    >
    {CardsNode()}
    </Box>

中身

const CardsNode = () => {
return _dummyInfoCards.map((card, idx) => (
  <Card
    key={idx}
    display='inline-block'
    mb={4}
    w='full'
  >
    <CardBody>{card.body}</CardBody>
  </Card>
));
};

割とシンプルです。以上！