PinterestレイアウトのReact-Semantic-UIカード

Question

React（semantic-ui-react）でsemantic-uiを使用してカードを表示しています。私は、カードがテキストの量に基づいて異なる高さを持つ、pinterestスタイルのレイアウトが必要です。

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

私が望むのは、カードの高さは、より多くの単語を含む質問のために増加する必要があります。現在、すべてのカードは、最大高さ（問題の単語の最大数）を持つものと同じ高さをとります。

ありがとうございます。

Answer 1

Masonryをお好みのレイアウトに使用できます。私の意見では、最高の「グリッドレイアウト」ライブラリです。さまざまな高さに関しては、これはMasonryで可能です。

詳細については、Masonryのドキュメントを読んでから、まずそれを試してください。それでも問題が解決しない場合は、問題の正確な質問を作成するか、この問題を更新してください。

Answer 2

参考までに、cdogが提供する解決策は、hereです。本質的には、以下のCSSを使用したセマンティックUIの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のソリューションの唯一の欠点は、コンテンツの順序は上から下になければならないことである、そして左から右へ http://jsfiddle.net/cdog/oj4ew4Le/embedded/result

有望に見える、残っていません右から上から下へ

代替注文オプションについては、石積みまたは類似のJSライブラリが必要と思われる。例については、GitHubの元の記事を参照してください。

Answer 3

特別なことなしにこれを行うことができます。カードをカードグループに入れないでください。代わりに、必要な数の列を作って、必要に応じて各列にカードを配置します。次のスニペットを試してください：

<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>