参考:http://www.w3cplus.com/css3/css-grid-layout-merge-cells.html

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
/* .wrapper {
display: grid;
grid-template-columns: repeat(4, (col) 100px (gutter) 10px);
grid-template-rows: repeat(4, (row) auto (gutter) 10px); } */ .box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
} .wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
} .a {
/*
* grid-column: 1 / 6;
* grid-row: 1 / 2;
*/ grid-column: 1 / span 5;
grid-row: 1;
} .b {
/*
* grid-column: 7 / 8;
* grid-row: 1 / 10;
*/
grid-column: 7;
grid-row: 1 / span 9;
background: orange;
} .c {
/*
* grid-column: 1 / 2;
* grid-row: 3 / 4;
*/
grid-column: 1;
grid-row: 3;
} .d {
grid-column: 3;
grid-row: 3;
} .e {
grid-column: 5;
grid-row: 3;
} .f {
grid-column: 1 / span 3;
grid-row: 5;
} .g {
grid-column: 5;
grid-row: 5;
} .h {
grid-column: 1;
grid-row: 7;
} .i {
grid-column: 3 / span 3;
grid-row: 7;
} .j {
grid-column: 1 / span 5;
grid-row: 9;
}
</style>
</head> <body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div>
</body> </html>

grid布局合并单元格的更多相关文章

  1. extjs grid合并单元格

    http://blog.csdn.net/kunoy/article/details/7829395 /** * Kunoy * 合并单元格 * @param {} grid 要合并单元格的grid对 ...

  2. Windows Forms DataGridView中合并单元格

    Windows Forms DataGridView 没有提供合并单元格的功能,要实现合并单元格的功能就要在CellPainting事件中使用Graphics.DrawLine和 Graphics.D ...

  3. poi的合并单元格和冻结行列

    //创建工作薄(excel) Workbook wb = new HSSFWorkbook(); //创建sheet Sheet createSheet = wb.createSheet(" ...

  4. easyui 自动动态合并单元格

    .......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...

  5. Extjs gridpanel 合并单元格

    /* * *合并单元格的函数,合并表格内所有连续的具有相同值的单元格.调用方法示例: * *store.on("load",function(){gridSpan(grid,&qu ...

  6. MiniUI框架合并单元格

    在项目中遇到合并单元格的问题,所以总结一下. 用的是miniUI框架,所以只谈miniUI中的单元格合并. (1)必须添加onLoad="onLoad" (2)需要在JS中进行单元 ...

  7. Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格

    目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...

  8. C# 获取Excel中的合并单元格

    C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...

  9. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

随机推荐

  1. python json dumps与loads有可能犯的错误

    json.dumps() 是将一个Python数据结构转换为一个JSON编码的字符串 json.loads() 是将一个JSON编码的字符串转换为一个Python数据结构     如下: >&g ...

  2. 在windows下实时监控、接受文件变化小工具

    在windows下实时监控文件变化小工具   在测试的时候,我们可能想实时监控系统打出的log信息,在unix系统上我们可以用"tail -f"实现,在windows下一般就无法做 ...

  3. const_cast的应用

    对于const变量,我们不能修改它的值,这是这个限定符最直接的表现.但是我们就是想违背它的限定希望修改其内容怎么办呢?于是我们可以使用const_cast转换符是用来移除变量的const限定符.con ...

  4. [hadoop读书笔记] 第十五章 sqoop1.4.6小实验 - 数据在mysq和hdfs之间的相互转换

    P573 从mysql导入数据到hdfs 第一步:在mysql中创建待导入的数据 1.创建数据库并允许所有用户访问该数据库 mysql -h 192.168.200.250 -u root -p CR ...

  5. js 实时数据显示

    js代码 <script type="text/javascript" src="jquery.js"></script> <sc ...

  6. python的callback函数原理

    __getattribute__作用 """ class C(object): a = 'abc' def __getattribute__(self, *args, * ...

  7. 【转】25个非常实用的jQuery/CSS3应用组件

    今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...

  8. git patch 使用

    使用git的时候,需要删除几个id,会对到之前的代码,但又想保留现在的代码,以便后面从新合并,所以就将现在的代码打包成patch,留到下次合并. 参考链接 http://www.jianshu.com ...

  9. JNDI是什么?

    JNDI,全称 Java Naming and Directory Interface. 以数据库的配置为例,简单的说,就是将对数据库的连接设置(driverClass.URL.user.passwo ...

  10. Linux操作_grep/egrep工具的使用

    一.grep命令介绍 命令格式:grep [-cinvABC] ‘word’ filename,常用选项如下: -c:表示打印符合要求的行数. -i:表示忽略大小写. -n:表示输出符合要求的行及其行 ...