React Material-UI GridList 계단식 레이아웃

Question

React Material-UI 라이브러리의 GridList 구성 요소를 계단식 레이아웃과 같은 방식으로 사용할 수 있습니까?

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

결과는 다음입니다 :

내가 빨간색 원의 격차를 제거 할

나는 재료 - UI에게 GridList 어린이 등 Card 구성 요소를 사용합니다. 어떤 도움을 많이 주시면 감사하겠습니다.

Answer 1

원하는 CSS는 flex-direction이 row 대신 column이 되겠지만, it doesn't look like the material-ui documentation gives you the option to change the order in which things render이되도록 설정하면됩니다.

다른 컨테이너 개체를 사용하거나 Pinterest 스타일 레이아웃을 렌더링 할 다음 요소가 어디로 이동해야하는지 결정할 때 좀 더 복잡한 논리가 필요하기 때문에 스스로를 만들려고합니다.