<!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网格的流动定位的更多相关文章

  1. grid网格的流动grid-auto-flow属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. grid网格的流动一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  4. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  5. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  6. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  7. 从 NavMesh 网格寻路回归到 Grid 网格寻路。

    上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...

  8. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  9. Android BottomSheet：List列表或Grid网格展示（3）

     Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...

随机推荐

  1. sql server 2012 删除服务器名称

    SQL Server 2008 R2及以前版本: http://blog.csdn.net/downmoon/article/details/5678468 SQL Server 2012: 删除这两 ...

  2. git基本操作：上传代码

    利用git将本地代码提交到远程服务器一般分为如下5个步骤: 一.查看当前文件的状态 使用git status命令可以查看有那些文件进行了修改,一般有下面几个状态: 1.Untracked: 未跟踪, ...

  3. 多变量频率统计——r

    例如有X1,X2,..,Xn个变量,我需要对每一个变量进行频次统计,如果一个一个求解的话非常麻烦,如table(X1), table(X2), ... ,table(Xn).有没有简单的语句一次性求解 ...

  4. ASK，OOK，FSK的联系和区别

    转自:http://www.cnblogs.com/zhihongyu/archive/2012/04/12/2443617.html ASK是幅移键控调制的简写,例如二进制的,把二进制符号0和1分别 ...

  5. Numpy 利用数组进行数据处理

    Numpy数组使你可以将许多种数据处理任务表述为简洁的数组表达式(否则需要编写循环). 用数组表达式代替循环的做法,通常被称为矢量化.一般来说,矢量化数组运算要比等价的纯跑一趟湖南快 上一两个数量级( ...

  6. python_smtplib

    import smtplib smtpserver = 'smtp.qq.com' fromaddr = 'fromaddr@qq.com' toaddrs = 'toaddr@qq.com' msg ...

  7. 全新升级的WiFi无线上网短信认证系统，适用于咖啡厅、足浴等公共场所，提高门门店营业收入

    WiFi无线上网短信认证系统经历从1.0到1.88的升级,都是用户在使用过程中,提出宝贵的意见,一直修复至今,有着非常稳定的版本. 这个软件有什么作用?WiFi为什么要认证呢? 其实这个只是获取用户联 ...

  8. Java排序算法——堆排序

    堆排序 package sort; public class Heap_Sort { public static void main(String[] args) { // TODO 自动生成的方法存 ...

  9. Fedora更改密码

    开机进入单用户模式 按e  --->进入编辑界面之后,在“rhgb quiet”字符前面,输入“single”加空格,回车-->返回上一步中启动命令行菜单. 按 b ---> pas ...

  10. mysql 解压版方法

    来自http://zhidao.baidu.com/link?url=RtXb2QKYTQ8Yd5TdTS7XHHiupzDaM19vlVBIrHTVmT7ZHi8kG3O9L6D6nnsfTGE-- ...