Css 使用Pinterest布局对语义UI卡作出反应

我在React（语义ui React）中使用语义ui来显示卡片。我需要一个pinterest风格的布局，其中卡将有不同的高度根据文本的数量

 ....
<Card.Content>
  <Card.Header className="textheader">
       <b>{this.props.tittle}</b>
  </Card.Header>
  </Card.Content>
            <CardsExtra question="My Question goes here"/>
....

。。。。
{这个。道具。标题}
....

我想要的是卡片的高度应该增加，以回答一个有更多单词的问题。目前，所有卡片的高度都与具有最大高度的卡片的高度相同（有问题的最大字数）

提前感谢。

您可以使用类似pinterest的布局。在我看来，这是最好的“网格布局”库。至于不同的高度，这是可能的砌体

---

至于如何做的细节，你应该先阅读砖石文档，然后自己试试。如果您仍然有问题，您可以为确切的问题创建一个问题或更新此问题。

作为参考，可以找到cdog提供的解决方案。从本质上说，它是一个CSS黑客语义用户界面和CSS如下

.masonry.grid {
  display: block;
}

@media only screen and (min-width: 768px) {
  .masonry.grid {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }

  .ui.doubling.masonry.grid[class*="three column"] > .column {
    width: 100% !important;
  }
}

@media only screen and (min-width: 992px) {
  .masonry.grid {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}

它起作用了，结果看起来很有希望

纯CSS解决方案的唯一缺点是内容的顺序必须是从上到下，然后从左到右，而不是从左到右，然后从上到下

---

对于可选的订购选项，似乎需要使用砌体或类似的JS库。有关示例，请参阅GitHub中的原始帖子。

您无需任何特殊操作即可完成此操作。不要把卡片放在卡片组中。取而代之的是，根据需要制作任意多的列，并根据需要在每列中放置卡片。请尝试以下代码段：

<Grid columns={3} stretched>
  <Grid.Column>
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
    <Card style={{ height: '30px' }} />
  </Grid.Column>
</Grid>