具有不同大小项目的平面列表行

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    min-width: 100px;
    max-width: 300px;
    margin: 10px;
  }
</style>
<div class="container">
  <div class="item">Small Item</div>
  <div class="item">This is a larger item</div>
  <div class="item">Very large item with lots of text that should wrap</div>
</div>

@media (max-width: 600px) {
  .item {
    width: 100%;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .item {
    width: 50%;
  }
}
@media (min-width: 1025px) {
  .item {
    width: 33.33%;
  }
}

// 示例：使用虚拟滚动库（如react-virtualized）
import { List } from 'react-virtualized';

function renderRow({ index, key, style }) {
  return (
    <div key={key} style={style}>
      Item {index}
    </div>
  );
}

function MyList({ items }) {
  return (
    <List
      width={300}
      height={300}
      rowCount={items.length}
      rowHeight={20}
      rowRenderer={renderRow}
    />
  );
}