React Material-UI GridListカスケードレイアウト

Question

React Material-UIライブラリのGridListコンポーネントをカスケードレイアウトのようなレイアウトで使用することはできますか？

私はGridListのための子供のような材料-UI Cardコンポーネントを使用します。

const cards = props.items.map((item) => <Card key={item.id} {...item} />); 
    return (
     <GridList cols={3} cellHeight={'auto'}> 
     {React.Children.toArray(cards)} 
     </GridList> 
    ); 

を結果は以下の通りです：

を私は赤い丸のギャップを削除したいです。どんな助けでも大歓迎です。

Answer 1

あなたのCSSに相当するのは、flex-directionをの代わりにcolumnに設定し、it doesn't look like the material-ui documentation gives you the option to change the order in which things renderの代わりに設定することです。

Pinterestスタイルのレイアウトでは、レンダリングされる次の要素の配置場所を決定するときに、別のコンテナオブジェクトを使用したり、自分でビルドしようとします。