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>
            <div class="window9" alt="7"></div>
            <div class="window9" alt="8"></div>
            <div class="window9" alt="9"></div>
          </div>
          <div class="video-show16" id="div16" style="display: none">
            <div class="window16" alt="1"></div>
            <div class="window16" alt="2"></div>
            <div class="window16" alt="3"></div>
            <div class="window16" alt="4"></div>
            <div class="window16" alt="5"></div>
            <div class="window16" alt="6"></div>
            <div class="window16" alt="7"></div>
            <div class="window16" alt="8"></div>
            <div class="window16" alt="9"></div>
            <div class="window16" alt="10"></div>
            <div class="window16" alt="11"></div>
            <div class="window16" alt="12"></div>
            <div class="window16" alt="13"></div>
            <div class="window16" alt="14"></div>
            <div class="window16" alt="15"></div>
            <div class="window16" alt="16"></div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <div class="btn_group">
          <ul>
            <li>
              <input type="button" @click="btn1" class="btn1" title="单屏" />
            </li>
            <li>
              <input type="button" @click="btn2" class="btn2" title="四屏" />
            </li>
            <li>
              <input type="button" @click="btn3" class="btn3" title="九屏" />
            </li>
            <li>
              <input type="button" @click="btn4" class="btn4" title="十六屏" />
            </li>
            <li>
              <input type="button" @click="showall" class="all" title="全屏" />
            </li>
          </ul>
        </div>
      </el-row>
    </el-main>

 btn1() {
      document.getElementById("div1").style.display = "block";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div9").style.display = "none";
      document.getElementById("div16").style.display = "none";
    },
    btn2() {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div4").style.display = "block";
      document.getElementById("div9").style.display = "none";
      document.getElementById("div16").style.display = "none";
    },
    btn3() {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div9").style.display = "block";
      document.getElementById("div16").style.display = "none";
    },
    btn4() {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div9").style.display = "none";
      document.getElementById("div16").style.display = "block";
    },

.window1 {
  float: left;
  margin-left: 0.5%;
  margin-bottom: 0.5%;
  width: 96%;
  /* height: 630px; */
  position: relative;
  padding-bottom: 50%;
  background-color: #000;
}

.window4 {
  float: left;
  margin-left: 0.5%;
  margin-bottom: 0.5%;
  width: 48%;
  height: 300px;
  position: relative;
  padding-bottom: 25%;
  background-color: #000;
}

.window9 {
  float: left;
  margin-left: 0.5%;
  margin-bottom: 0.5%;
  width: 30%;
  height: 100px;
  position: relative;
  padding-bottom: 16.5%;
  background-color: #000;
}

.window16 {
  float: left;
  margin-left: 0.5%;
  margin-bottom: 0.5%;
  width: 23%;
  /* height: 0; */
  position: relative;
  padding-bottom: 12.3%;
  background-color: #000;
}

在这里插入图片描述修改内容：
使用v-if 控制界面分屏数的显示，删除display:block相关。

<div class="preview-body_div">
  <div class="preview-videoshow_div">
    <div class="preview-video-show1" v-if="video_windows==1" >
      <div class="preview-window1_div" alt="1"></div>
    </div>
    <div class="preview-video-show4" v-else-if="video_windows==4">
      <div class="preview-window4_div1" alt="1"></div>
      <div class="preview-window4_div2" alt="2"></div>
      <div class="preview-window4_div3" alt="3"></div>
      <div class="preview-window4_div4" alt="4"></div>
    </div>
    <div class="preview-video-show9" v-else-if="video_windows==9">
      <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>
      <div class="window9" alt="7"></div>
      <div class="window9" alt="8"></div>
      <div class="window9" alt="9"></div>
    </div>
    <div class="preview-video-show16" v-else>
      <div class="window16" alt="1"></div>
      <div class="window16" alt="2"></div>
      <div class="window16" alt="3"></div>
      <div class="window16" alt="4"></div>
      <div class="window16" alt="5"></div>
      <div class="window16" alt="6"></div>
      <div class="window16" alt="7"></div>
      <div class="window16" alt="8"></div>
      <div class="window16" alt="9"></div>
      <div class="window16" alt="10"></div>
      <div class="window16" alt="11"></div>
      <div class="window16" alt="12"></div>
      <div class="window16" alt="13"></div>
      <div class="window16" alt="14"></div>
      <div class="window16" alt="15"></div>
      <div class="window16" alt="16"></div>
    </div>
  </div>

    btn1() {
      this.video_windows=1;    
      },
    btn2() {
      this.video_windows=4;
    },
    btn3() {
      this.video_windows=9;
    },
    btn4() {
      this.video_windows=16;
    },

.preview-body_div{
  width:100%;
  height:100%;
  display: grid;
  grid-template-rows:1fr 3rem;
  grid-template-columns:1fr 25%;
}
.preview-videoshow_div{
  grid-row: 1/2;
  grid-column: 1/2;
  margin-left:2px;
  margin-right:2px;
}
.preview-video-show1{
  width:100%;
  height:100%;
}
.preview-window1_div{
  width:100%;
  height:100%;
  background-color: rgb(43, 41, 41);
}
.preview-video-show4{
  height:100%;
  display: grid;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr 1fr;
  background-color: rgb(230, 171, 171);
}
.preview-window4_div1{
  grid-row: 1/2;
  grid-column: 1/2;
  background-color: rgb(209, 94, 18);
}
.preview-window4_div2{
  grid-row:1/2;
  grid-column: 2/3;
  background-color: rgb(168, 236, 103);
}
.preview-window4_div3{
  grid-row:2/3;
  grid-column: 1/2;
  background-color: rgb(98, 219, 228);
}
.preview-window4_div4{
  grid-row:2/3;
  grid-column: 2/3;
  background-color: rgb(87, 136, 241);
}

使用CSS还可以合理分割界面，而不会产生之前使用%确定div尺寸时的忽大忽小的情况。
在这里插入图片描述

原文链接：https://blog.csdn.net/Nie2014/article/details/118680575