我正在try 在我的Reaction项目中实现流行的Pinterest砖石网格视图.我知道网上有无数的资源可以帮助我做到这一点，但我找不到一个适合我的用例.
我的 case 是:
我有一个Reaction组件，可以有三种预先设定的尺寸:小号、中号和大号.此组件的每个变体在桌面上的宽度均为200px，在移动设备上的宽度为${windowSize.Current[0]*0.45}px.
每个组件的不同之处在于，小卡的预置高度为160px，中卡为250px，大卡为320px.
下面是动态卡片react 的一些片段:
<div className='LiveRoomCard' style={{
border: props.liveroom.joined ? '1.5px solid #d500f9' : props.liveroom.pinned ? '1.5px solid black' : '1px solid lightgray',
marginLeft: isMobile ? `${windowSize.current[0]*0.008}vw` : '2.5vw',
width: isMobile ? `${windowSize.current[0]*0.45}px` : '200px',
maxWidth: isMobile ? `${windowSize.current[0]*0.45}px` : '200px',
height: props.size === 'small' ? '160px' : props.size === 'medium' ? '250px' : '320px',
maxHeight: props.size === 'small' ? '160px' : props.size === 'medium' ? '250px' : '320px'
}}>
<div className='LiveRoomCard-image' style={{
minHeight: props.size === 'small' ? '70px' : props.size === 'medium' ? '150px' : '200px',
maxHeight: props.size === 'small' ? '70px' : props.size === 'medium' ? '150px' : '200px'
}}>
<img src={props.liveroom.backgroundImage ?? cardPlaceHolder} alt='post bg image' style={{
minHeight: props.size === 'small' ? '70px' : props.size === 'medium' ? '150px' : '200px',
maxHeight: props.size === 'small' ? '70px' : props.size === 'medium' ? '150px' : '200px'
}}/>
</div>
//rest of body that is unimportant for this question
</div>
这是css的外观:
.LiveRoomCard {
display: flex;
flex-direction: column;
background-color: white;
height: 320px;
max-height: 320px;
border-radius: 15px;
box-shadow: 2px 2px 2px grey;
margin-top: 4%;
margin-left: 2.5vw; /*overriden in react component*/
}
.LiveRoomCard-image {
flex: 1; /* Allow the content to take remaining top space. The LiveRoomCard-details div then takes the little at the bottom */
}
.LiveRoomCard-image img{
min-width: 100%;
max-width: 100%;
object-fit: cover; /* This maintains aspect ratio and covers the container */
border-radius: 15px 15px 0 0;
}
现在，这个卡片网格位于父组件中.父组件对每个卡的大小进行随机分配:
const postCardSizes = ["small", "medium", "large"];
<div className='Liverooms-container' style={{height: isMobile ? '500px' : '700px'}}>
{rooms.map(liveroom => {
const sizeIndex = Math.floor(Math.random() * postCardSizes.length);
const randomSize = postCardSizes[sizeIndex];
return (
<div className='Liverooms-card-container' key={liveroom.roomId}>
<LiveRoomCard key={liveroom.roomId} size={randomSize}/>
</div>)
})}
</div>
下面是css的外观:
.Liverooms-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-y: scroll;
overflow-x: scroll;
}
.Liverooms-card-container {
height: fit-content;
}
I feel like I am almost there as this is what my output looks like on desktop: 
And this is what it looks like on mobile:
不用说，我正在努力实现的是消除行之间不必要的间距，并实现由三个预先固定高度的组件组成的真正的砖石网格.这是可以实现的吗？还是我必须彻底改变我的方法？