div wrap for antd component - css

Question

Hi i am having some trouble with Antd Space wrapping.
Sorry i'm an idiot with the css. Is there a css or style i can do to make it wrap to the next row?
This is within a <List.Item>
(Am ok to switch out the Space component to a normal div with appropriate css that can do the wrapping)
import { Card, Col, Row, Space } from 'antd';
<Space>
{ item.shares.reverse().map((share, i) => (
<SinglePost
share = {share}
height={300}
width={300}
/>
))}
</Space>
in SinglePost.js
return (
<Col span={8}>
<Card style={{ width: props.width, height: props.height }}
bordered={false}
>
<div className="approval-list-sub-box-holder-small">
<Player
playsInline
// src={currentData.content.video}
fluid={false}
height="100%"
width="100%"
>
. . .
</div>
</Card>
</Col>
)
This is the output currently but as you can see it might become too long on the width and becomes unviewable :(

Answer 1

Adding a wrap = true seems to work. For some reason i think i tried it just now but didn't.
Alternatively having a div with flex-wrap: wrap; also seem to work. i went with space for now.
<Space wrap = {true}>
{ item.shares.reverse().map((share, i) => (
<SinglePost
share = {share}
userId = {props.userId}
height={300}
width={300}
/>
))}
</Space>