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

Question

[7GBars]

У меня есть компонент React с этой структурой: инструменты и блоки searchPanel имеют фиксированную высоту. основной блок должен занимать оставшееся пространство:

<div className={`reference-container`}> 
        {
         isToolsVisible && <div className={`tools`}></div>
        }
        {
         isSeracpPanleVisible && <div className={`searchPanel`}></div>
        }
        <div className={`mainContent`}></div>
    </div>

У меня есть файл таблицы стилей:

.reference-container {
    $toolHeight: 100px;
    $serachPanelHeight: 50px;
    
    height: 100%;
    display: grid;
    grid-template-areas: 
      "tools"
      "serachPanel"
      "mainContent";
    grid-template-rows: $toolHeight $serachPanelHeight 1fr;
    
    .tools {
        grid-area: tools
    }
    .searchPanel {
        grid-area: searchPanel
    }
    .mainContent {
        grid-area: mainContent
    }
}

В зависимости от состояния tool и searchPanel отображаются. Однако я не уверен, как правильно изменить области шаблонов сетки, когда условные блоки отсутствуют.
Я попытался установить несколько классов условных модификаторов для родительского контейнера и на их основе динамически определить шаблон сетки в CSS-файле.

<div className={`reference-container ${isToolsVisible ? 'with-tools' : ''} ${isSearchPanelVisible ? 'with-search-panel' : ''}`}>
  {isToolsVisible && <div className={`tools`}></div>}
  {isSearchPanelVisible && <div className={`searchPanel`}></div>}
  <div className={`mainContent`}></div>
</div>

css:

.reference-container {
  $toolHeight: 100px;
  $searchPanelHeight: 50px;

  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  
  &.with-tools {
    grid-template-areas: 
      "tools"
      "mainContent";
    grid-template-rows: $toolHeight 1fr;
  }
  
  &.with-search-panel {
    grid-template-areas: 
      "searchPanel"
      "mainContent";
    grid-template-rows: $searchPanelHeight 1fr;
  }
  
  .tools {
    grid-area: tools;
  }
  
  .searchPanel {
    grid-area: searchPanel;
  }
  
  .mainContent {
    grid-area: mainContent;
  }
}

Я думаю, что это не правильное решение, может быть, в этом случае лучше вообще не использовать сетку? Посоветуйте, пожалуйста, лучший вариант. Спасибо заранее!

Answer 1

[reivunxx]

Из описания не совсем понятно чем обусловлена необходимость использовать grid
Например, можно сделать так

.reference-container {
  $toolHeight: 100px;
  $searchPanelHeight: 50px;

  height: 100%;
  display: flex;
  flex-direction: column;


  .tools {
    height: $toolHeight;
  }

  .searchPanel {
    height: $searchPanelHeight;
  }

  .mainContent {
    flex-grow: 1;
  }
}

Comments

[7GBars]

выбрал решением, потому что искал как раз аналога, кажется что в данном конкретном кейсе grid излишен, спасибо!

Answer 2

[Александр]

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

<div className="reference-container">
  <div className="reference-container-panel">
    {isToolsVisible && <div className="tools"></div>}
    {isSeracpPanleVisible && <div className="searchPanel"</div>}
  </div>
  <div className="mainContent"></div>
</div>

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