Как разместить автоматические строки в предопределенной сетке CSS, например, посередине, без использования JS (используя Reactjs здесь)

Question

Мне интересно, есть ли способ создания автоматических строк с CSS grid, когда эти строки создаются в пределах предопределенного grid.

Обычно, когда создаются автоматические строки, как эти rows не были предопределены ранее, они добавляются в самый конец предопределенного grid, учитывая здесь flow по умолчанию.

Я создал простое демонстрационное решение с javascript, но я бы хотел чтобы увидеть способ native сделать это просто с помощью CSS.

Если кто-то явно пытается, например, поместить элемент сетки в первую строку / столбец, используя синтаксис типа grid-area: -1 / 1 / -1 / -1 после определяя grid rows & columns с чем-то вроде repeat(auto, 1fr), элемент не знает, где находится -1, так как нет явного определенного числа rows и columns, что заставляет меня используйте js, чтобы явно добавить rows в этом случае, чтобы автоматически разместить добавленный rows там, где я хочу, оставляя пространство в середине сетки свободным для заполнения созданным rows.

рабочий раствор с JS можно найти здесь

Я также напечатаю JS React component и это css ниже:

App.js

import React, { useState, Fragment } from "react";
import "./styles.css";

function App() {
  const [boxList, setBoxList] = useState([]);
  const [rowN, setRowN] = useState(3)
  const [gridRows, setGridRows] = useState({})
  const addBoxHandler = () => {
    const id = Math.max(boxList.length + 1);
    setBoxList((prevState) => [...prevState, id]);
    setRowN(prevState => prevState + 1)
    setGridRows({gridTemplateRows: `repeat(${rowN}, 1fr)`})
  };

  const list = boxList.map((item, index) => {
    const cssStyles = ["autoGrid", index % 2 === 0 ? "autoGrid__pair" : null];
    return (
      <div className={cssStyles.join(" ")} key={index}>
        El {index}
      </div>
    );
  });
console.log(rowN)
  return (
    <Fragment>
      <div style={gridRows} className="container">
        <div className="el1">Element 1</div>
        <div className="el2">Element 2</div>
        {list}
      </div>
      <button
        style={{ display: "block", margin: "auto", padding: 10 }}
        onClick={addBoxHandler}
      >
        Add Box
      </button>
    </Fragment>
  );
}

export default App;

style.css

.container {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: minmax(5rem, auto);
}

.el1 {
  background: rgba(255, 154, 72, 0.5);
  grid-area: 1 / 1 / 2 / -1
}

.el2 {
  background: rgba(0, 4, 255, 0.5);
  grid-area: -1 / 1 / -2 / -1
}

.autoGrid {
  background-color: rgb(248, 86, 68);
  color: white;
  font-weight: bold;
  grid-column: 1 / -1;
  grid-row: auto / auto
}

.autoGrid__pair {
  background-color: purple;
}