1、合并行和列之后 保持在原来的位置
这里的6合并了两行两列，位置一直没有发生变化。
关键代码
.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个格子合并两行两列位置保持不变
关键代码
.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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。