Javascript 更改CSS网格以适应展开的元素

const Demo = () => {
    const Item = ({content}) => {
        const [expanded, setExpanded] = React.useState(false);
        return ( < div className = {            expanded ? "expanded" : "item" }
          onClick = { () => setExpanded(!expanded)
          } > { content} </div>) }

        return ( < div className = "grid" >
          <Item content = "Item 1" / >
          <Item content = "Item 2" / >
          <Item content = "Item 3" / >
          <Item content = "Item 4" / >
          <Item content = "Item 5" / >
          <Item content = "Item 6" / >
          </div>)
        }
        ReactDOM.render( < Demo / > , document.querySelector("#app"))

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));

  /* use dense layout */
  grid-auto-flow: row dense;
}

.item {
  display: flex;
  height: 100px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
}

.expanded {
  display: flex;
  border: 1px solid black;
  justify-content: center;
  align-items: center;

  height: calc(200px + 1rem);
  /* need to increase row span also */
  grid-row: span 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

<div id="app" />