我想创建一个砖石一样的布局，当你点击一个div，然后它的大小调整到全屏，或者至少变得比其他div更大。 比如pinterest，当你点击一张图片时，图片就会变大。 但是在我的代码中，我已经能够为div生成随机的高度和颜色，但是div的宽度太小，当我点击它时，它不能扩展到屏幕的100%。 我还希望它们是可切换的，如果我再次点击一个全屏div，它会回到它的正常大小或随机高度，这将产生。 我在代码里做错了什么？

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      activeIndex: -1
    };
  }
  addActiveClass(activeIndex) {
    this.setState(prev => ({
      activeIndex: prev.activeIndex === activeIndex ? -1 : activeIndex
    }));
  }

  render() {
    return (
      <div className="container">
        {Array.from({ length: 30 }).map((item, index) => {
          return (
            <div
              key={index}
              style={{
                background: randomColor(colors),
                height: randomHeight(100, 200)
              }}
              className={this.state.activeIndex === index ? "full" : ""}
              onClick={() => this.addActiveClass(index)}
            />
          );
        })}
      </div>
    );
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
  align-items: flex-start
}

.container > * {
  border: 2px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

.full{
  width: 100%;
  height: 100%;
  transition: 2s;
}

沙箱