Использование CSS сетки с предварительным загрузчиком и динамическим HTML

Question

Привет, мой HTML изначально выглядит так:

<app>
    <div id="preloader">
    </div>
</app>

, но после загрузки приложения его заменяют на

<app>
    <div id="main">
    </div>
    <div id="other">
    </div>
</app>

Но как мне на самом деле настроить css-grid для этого?сделать preloader полноэкранным, но main и other шаблонным?

Страница не перезагружается

Я бы хотел использовать их обоихсразу

grid-template-areas: 
"preloader";

grid-template-areas: 
"main other"
"main other"
"main other";

Answer 1

Просто настройте загрузчик на всю сетку, определенную для вашего основного контента:

app {
  display: grid;
  grid-template-areas: 
    "main other" 
    "main other" 
    "main other";
  height: 200px;
  border: 1px solid;
}

#main {
  grid-area: main;
  background: red;
}

#other {
  grid-area: other;
  background: green;
}

#preloader {
  grid-column: 1/span 2;
  grid-row: 1/span 3;
  background: yellow;
}

While loading
<app>
  <div id="preloader">
  </div>
</app>
After content is loaded
<app>
  <div id="main">
  </div>
  <div id="other">
  </div>
</app>