grid网格的流动定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
background: orange;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 3em;
margin-right:15px;
}
.box:nth-child(even) {
background: green;
}
.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
display: grid;
grid-template-columns: repeat(5, 115px);
grid-template-rows: repeat(3,115px);
}
.b {
/*row-1,column-1,row-2,column-2*/
grid-area: 2 / 3 / 3 / 6;
/*相当于*/
/*grid-column: 3 / 6;*/
/*grid-row: 2 / 3;*/
}
.f {
/*行1，列1，行2，列2*/
grid-area:3 /1 / 4 / 6;
/*相当于*/
/*grid-column:1 / 6;*/
/*grid-row:3 / 4; */
}
</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网格的流动定位的更多相关文章
- grid网格的流动grid-auto-flow属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- grid网格的流动一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- Grid 网格布局详解
Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...
- 从 NavMesh 网格寻路回归到 Grid 网格寻路。
上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...
- python之tkinter使用-Grid(网格)布局管理器
# 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...
- Android BottomSheet：List列表或Grid网格展示（3）
Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...
随机推荐
- MSSQL跨服务器查询
1.因为此功能服务器安全配置的一部分而被关闭,所以我们先开启 reconfigure reconfigure 2.如果需要关闭,执行 reconfigure reconfigure 3.查询语句 SE ...
- mongo 杀掉慢的程序killMyRunningOps("12.23.32.21") #####这个是客户端的ip
mongodb运维(3) db.currentOp与db.killOp命令 2018.08.12 23:55 113浏览 字号 好久没更新mongo运维这块知识了,这次介绍 db.currentOp ...
- 微信支付WxpayAPI_php_v3（三）支付成功回调
接收回调通知后的业务处理都在NotifyProcess做,$data包含了微信返回给你的数据. Service: <?php /** * Created by PhpStorm. * User: ...
- 《快学 Go 语言》第 16 课 —— 包管理 GOPATH 和 Vendor
到目前位置我们一直在编写单文件代码,只有一个 main.go 文件.本节我们要开始朝完整的项目结构迈进,需要使用 Go 语言的模块管理功能来组织很多的代码文件. 细数 Go 语言的历史发展,模块管理经 ...
- js判断类型的方法
//判断类型 var arr=[]; Object.prototype.toString.call(arr)=='[object Array]' //判断是否是包含关系 function elCont ...
- Linux 内核版本，Ubuntu版本的查看
查看内核版本 1) cat /proc/version [root@a ~]# cat /proc/version Linux version 2.6.18-194.el5 (mockbuild@x ...
- MySql避免重复插入记录的几种方法
本文章来给大家提供三种在mysql中避免重复插入记录方法,主要是讲到了ignore,Replace,ON DUPLICATE KEY UPDATE三种方法,有需要的朋友可以参考一下 方案一:使用ign ...
- tornado 添加请求头进行允许跨域
什么是跨域? 这个例子是csdn找的, 声明下哈 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同, ...
- SAP ML 物料分类账详解（含取消激活物料帐方法）
一.业务背景: 中国会计准则规定,对存货的核算必须采用历史成本法(即实际成本法).如果企业采用计划成本法或者定额成本法进行日常核算的,应当按期结转其成本差异,将计划成本或者定额成本调整为实际成本. “ ...
- 用OpenGL进行立方体表面纹理贴图
一.目的 掌握OpenGL中纹理对象的创建.绑定与使用方法. 二.简单介绍 1,连接静态库 #pragma comment(lib, "glut32.lib") #pragma c ...