展開されている間にコンポーネント（カードコンポーネント）の位置を保持するにはどうすればいいですか（Material-UI + ReactJS）？

Question

拡張可能なカードコンポーネント（http://www.material-ui.com/#/components/card）を使用しており、コンポーネントのアライメントにフレキシブルです。

しかし、たとえのいずれか一は、次のように膨張したときしかし、空の空間が拡張コンポーネントと同じ行にある他の構成要素に拡張成分の大きさに基づいて追加されますカードが展開されていれば、未拡張のカードがその位置を保持し、その間に空きスペースがないようにしたいと思います（例えば、カード1とカード4、カード3と6と同じものをカード2）が展開されたとき：

私は周りを見回しましたが、解決策を見つけることができませんでした。どんな提案や指導も大歓迎です。前もって感謝します。最初の行のコードの

スニペット（それは2行目と同じフォーマットとスタイルです）：

<div style={{display:'flex'}}> 
      <div style={{flex: '1 0'}}> 
      <Card style={{ marginLeft: 30, marginRight: 30}}> 
      <CardHeader 
       title="Card 1" 
       subtitle="Subtitle 1" 
       actAsExpander={true} 
       showExpandableButton={true} 
      /> 
      <CardMedia 
       expandable={true} 
      > 
       <img src="image1.PNG" /> 
      </CardMedia> 

      <CardText expandable={true}> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
      Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
      Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
      </CardText> 
      <CardActions expandable={true}> 
       <FlatButton label="Action 1" /> 
       <FlatButton label="Action 2" /> 
      </CardActions> 
      </Card> 
      </div> 

     &nbsp; 

      <div style={{flex: '1 0'}}> 
      <Card style={{ marginRight: 30}}> 
      <CardHeader 
       title="Card 2" 
       subtitle="Subtitle 2" 
       actAsExpander={true} 
       showExpandableButton={true} 
      /> 
      <CardMedia 
       expandable={true} 
      > 
       <img src="image2.PNG" /> 
      </CardMedia> 
      <CardText expandable={true}> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
       Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
       Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
      </CardText> 
      <CardActions expandable={true}> 
       <FlatButton label="Action1" /> 
       <FlatButton label="Action2" /> 
      </CardActions> 
      </Card> 
      </div> 

     &nbsp; 

     <div style={{flex: '1 0'}}> 
     <Card style={{ marginRight: 30}}> 
      <CardHeader 
      title="Card 3" 
      subtitle="Subtitle 3" 
      actAsExpander={true} 
      showExpandableButton={true} 
      /> 

      <CardMedia 
      expandable={true} 
      > 
      <img src="image3.PNG" /> 
      </CardMedia> 

      <CardText expandable={true}> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
      Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
      Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
      </CardText> 
      <CardActions expandable={true}> 
      <FlatButton label="Action1" /> 
      <FlatButton label="Action2" /> 
      </CardActions> 
     </Card> 
     </div> 
     </div> 

Answer 1

あなたはhereを示した石工のレイアウト、例をチェックアウトする場合があります。現代のブラウザではCSSのみのソリューションが可能です。そうでない場合は、記事で説明したJSフォールバックを使用してください。

column-countとcolumn-gapのブラウザサポートをcaniuseに確認してください。

問題は厳密な解決策ではないかもしれませんが（要素は列間を移動できます）、少なくとも列内の要素間のスペースを削除するレイアウトです。

HTML

<div class="masonry"> 
    <div class="item"> 
    <Card> 
    ... 
    </Card> 
    </div> 
    <div class="item"> 
    <Card> 
    ... 
    </Card> 
    </div> 
    ... 
</div> 

CSS

.masonry { 
    column-count: 3; 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-gap: 1em; 
    -webkit-column-gap: 1em; 
    -moz-column-gap: 1em; 
} 

.item { 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
}