将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>