前提・実現したいこと
以下の写真のように上の画像の直下に折り返してきた画像を入れたいのですが、隙間ができてしまいます。
調べたgrid imageのcssを参考に試したのですが、うまく行きません。
どのようにすれば直下に配置することができるのでしょうか。
わかる方がいましたらコメントお願いします。
発生している問題・エラーメッセージ
画像が直下に来てくれない
該当のソースコード
import React, { VFC } from 'react' import { Box, Image } from '@chakra-ui/react' const CatGridImage: VFC = () => { return ( <Box display="inline-block" width="400px"> <Box display="flex" flexWrap="wrap"> <Image height="120" src={`${process.env.PUBLIC_URL}/assets/cat_2.png`} /> <Image height="250" src={`${process.env.PUBLIC_URL}/assets/cat_3.png`} /> <Image height="200" src={`${process.env.PUBLIC_URL}/assets/cat_1.png`} /> </Box> </Box> ) } export default CatGridImage
###参考
https://www.w3schools.com/howto/howto_js_image_grid.asp
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。