网格和蚂蚁设计

Question

我想按每行的第3列对卡片邮递进行排序，但是当我在style={{""}中输入代码时不起作用。

然后，我正在使用Ant-Design。请帮助我该如何解决？

props.list.map(result => (
    <div key={result.id}>
        <Row className="gutter-example" gutter={16}>
            <Col className="gutter-row" span={6}>
            <Card hoverable style={{ width: 200 }} cover={ result.volumeInfo.imageLinks ? <img alt="BookCover" src={result.volumeInfo.imageLinks.thumbnail} />:
            <img alt="Alternative_Cover" src={AlterNative} />
            }
            >
            <Meta title={result.volumeInfo.title} description={ <a href={result.volumeInfo.infoLink}>
            {result.volumeInfo.infoLink}
            </a>
            }
            />
            </Card>
            </Col>
        </Row>
    </div>

Answer 1

我不使用Ant Design，但是我虽然<Row />组件是包装器，但它应该包装您所有的<Col />

因此，如果要每个渲染3个项目，则应渲染<Col span={6} />组件中的所有<Row />。每个<Row />是平均宽度容器。

<Row>
     {list.map(item => <Col key={item.id} span={6}><Card /></Col>)}
</Row>

Answer 2

您可以使用列表组件并将grid = {{gutter：16，column：3}}添加到其道具中