如何在語義網格中根據長度堆疊卡片

Question

我正在使用 React.js 和語義 UI。 我使用 Semantic UI 中的 Grid 將卡片（框）放置在網格中。

如何使網格行像下面的圖像一樣堆疊？ 我希望將卡片元素行到 go 到此時最短的列？ 有沒有辦法做到這一點？

目前它只是在藍色和綠色之間留下一點差距（等於藍色和紅色之間的差異）。 這是我目前的代碼：

<Grid stackable columns={2}>
    {
        props.list.map((aProject) => (
            <Grid.Column key={aProject.id}>
                <ProjectCard project={aProject} />
            </Grid.Column>
        )
    }
</Grid>

Answer 1

您可以將此庫用於您的用例。 https://github.com/dantrain/react-stonecutter我希望這可以幫助你