Как изменить значения grid-template-rows динамически и правильно?

Для изменения значения свойства grid-template-rows динамически и правильно в React, вы можете использовать состояние компонента.

В компоненте React, вы можете определить состояние с помощью хука useState. Создайте состояние, которое будет содержать значение grid-template-rows, и функцию для его обновления. Например:

```jsx
import React, { useState } from "react";

const App = () => {
  const [gridTemplateRows, setGridTemplateRows] = useState("auto 1fr");

  const handleButtonClick = () => {
    // Обновление значения grid-template-rows
    setGridTemplateRows("auto 1fr 100px");
  };

  return (
    <div className="container" style={{ gridTemplateRows }}>
      <div className="tools">Инструменты</div>
      <div className="searchPanel">Блок поиска</div>
      <div className="mainBlock">Основной блок</div>

      <button onClick={handleButtonClick}>Изменить</button>
    </div>
  );
};

export default App;
```

В этом примере, начальное значение grid-template-rows установлено на "auto 1fr". При клике на кнопку, вызывается функция handleButtonClick, которая обновляет значение gridTemplateRows на "auto 1fr 100px".

Верхний блок tools имеет высоту auto и будет автоматически растягиваться, чтобы вместить свое содержимое.

Блок searchPanel также будет иметь фиксированную высоту, например, 50px, и будет занимать эту высоту независимо от изменения значения gridTemplateRows.

Основной блок mainBlock будет занимать оставшееся пространство, так как имеет значение 1fr, которое означает "пропорциональная часть оставшегося пространства". Когда значение gridTemplateRows изменяется на "auto 1fr 100px", основной блок будет занимать оставшееся пространство после блоков tools и searchPanel.

Разбейте контейнер на несколько блоков с помощью гридов, чтобы использовать высоту внутренних элементов.

```
.reference-container {
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr;
}
```

Установите определенную высоту для панели инструментов и панели поиска, если они видимы.

```
.reference-container-panel {
  display: grid;
  grid-auto-rows: max-content;
}

.reference-container-panel:empty {
  display: none;
}

.tools {
  height: 100px;
}

.searchPanel {
  height: 50px;
}
```