gird 布局合并了行和列 原位置不动

1、合并行和列之后 保持在原来的位置 

这里的6合并了两行两列，位置一直没有发生变化。

image

关键代码

    .grid_div{
        grid-row: 2/4;  /*第二行合并两行*/
        grid-column: 2/4;  /*这一列合并两列（1+2），2就是第二列*/
    }
   <div class="grid-content ">
             <div class="grid1 ">1</div>
             <div class="grid1 ">2</div>
             <div class="grid1 ">3</div>
             <div class="grid1 ">4</div>
             <div class="grid1 ">5</div>
             <div class="grid1 grid_div">6</div>
             <div class="grid1">7</div>
             <div class="grid1">8</div>
             <div class="grid1">9</div>
             <div class="grid1">10</div>
             <div class="grid1">11</div>
             <div class="grid1">12</div>
           </div>

2、第5个格子合并两行两列位置保持不变

image

 关键代码

.grid_div{
        grid-row: 2/4;  /*第二行合并两行*/
        grid-column: 1/3;  /*这一列合并两列（1+2），2就是第二列*/
    }
<div class="grid-content ">
             <div class="grid1 ">1</div>
             <div class="grid1 ">2</div>
             <div class="grid1 ">3</div>
             <div class="grid1 ">4</div>
             <div class="grid1 grid_div">5</div>
             <div class="grid1 ">6</div>
             <div class="grid1">7</div>
             <div class="grid1">8</div>
             <div class="grid1">9</div>
             <div class="grid1">10</div>
             <div class="grid1">11</div>
             <div class="grid1">12</div>
           </div>

 

 

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
    <div id="containter">
    <el-row>
        <el-col :span="2"><div class="grid-content bg-purple">1</div></el-col>
        <el-col :span="22">
           <div class="grid-content ">
             <div class="grid1 ">1</div>
             <div class="grid1 ">2</div>
             <div class="grid1 ">3</div>
             <div class="grid1 ">4</div>
             <div class="grid1 grid_div">5</div>
             <div class="grid1 ">6</div>
             <div class="grid1">7</div>
             <div class="grid1">8</div>
             <div class="grid1">9</div>
             <div class="grid1">10</div>
             <div class="grid1">11</div>
             <div class="grid1">12</div>
           </div>
           <!-- <div class="grid-content ">
             <div class="grid1">1</div>
             <div class="grid1">1</div>
             <div class="grid1">1</div>
             <div class="grid1">1</div>
             <div class="grid1">1</div>
           </div> -->
        </el-col>
    </el-row>
 
    </div>

</body>
   <!-- import Vue before Element -->
   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

<script>
    new Vue({
        el: '#containter',
        data: function() {
          return { visible: false }
        }
      })
</script>
</script>
<style>
    #containter{
        min-width: 1200px;
        width: 100%;
        height: 100%;
        border: 1px solid red;
    }

 
  
  .grid-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    border: 1px solid #99a9bf;
    .grid1{
        min-height: 36px;
        border: 1px solid #99a9bf;
        
    }
    
    .grid_div{
        grid-row: 2/4;  /*第二行合并两行*/
        grid-column: 1/3;  /*这一列合并两列（1+2），2就是第二列*/
    }
  
    
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
</style>
</html>

 

posted @ 2025-11-12 11:45  幽冥狂_七  阅读(7)  评论(0)    收藏  举报