Alter CSS Grid to accomodate an element expanding

Issue

The code in the following snippet renders a resonsive grid, that expands an element that is clicked.

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));
}

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

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

<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" />

When clicking on e.g. Item 2, the grid looks as follows:

However, in this case, I would like the grid to look like:

How would I go about fixing this? The solution does not have to use the a CSS Grid. However, the responsive width of the elements, and the responsive number of rows and columns must be maintained.

Solution

If you are looking for dense grid layout then on grid container you need mention that you need dense auto flow in rows:

.grid {
  ...
  grid-auto-flow: row dense;
}

To properly increase the items' height, increase row span as well:

.expanded {
  height: 200px;
  grid-row: span 2;  /* <--- */
}

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" />

Answered By - the Hutt