CSS diaplay=“grid“未生效与display:block

1、CSS grid可以通过嵌套生成更灵活的页面布局。
参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例

<p class="container">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item inner-grid">
    <p class="item">i</p>
    <p class="item">ii</p>
    <p class="item">iii</p>
    <p class="item">iv</p>
    <p class="item">v</p>
    <p class="item">vi</p>
  </p>
  <p class="item">Five</p>
  <p class="item">Six</p>
</p>

.container {
   
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}
.inner-grid {
   
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

2、CSS diaplay="grid"未生效
需要实现视频分屏显示，但是之前同事写的代码里使用了diaplay:block和display:none这样的方法控制界面显示。当我开始添加display:grid的内容，则界面无任何变化。而且点击不同分屏按钮，视频播放器的div尺寸忽大忽小，查看浏览器的调试界面：

 <el-main>
      <el-row>
        <el-col :span="20">
          <div class="video-show1" id="div1">
            <div class="window1" alt="1"></div>
          </div>
          <div class="video-show4" id="div4" style="display: none">
            <div class="window4" alt="1"></div>
            <div class="window4" alt="2"></div>
            <div class="window4" alt="3"></div>
            <div class="window4" alt="4"></div>
          </div>
          <div class="video-show9" id="div9" style="display: none">
            <div class="window9" alt="1"></div>
            <div class="window9" alt="2"></div>
            <div class="window9" alt="3"></div>
            <div class="window9" alt="4"></div>
            <div class="window9" alt="5"></div>
            <div class="window9" alt="6"></div