Gird(2)
grid 布局（2）
grid区域属性
网格线名称
grid-template-columns 和 grid-template-rows 属性里面，还可以使用方括号指定每一根网格线的名字，方便以后引用
例:
.container{
display:grid;
grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
}
上面的代码指定网格布局为 3*3 ，因此会有4根垂直网格线和4根水平网格线
网格布局允许一个网格线上有多个名字，比如[fifth-line row-5];
grid-template-areas 属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。
grid-template-areas属性用于定义区域
.container{
display:grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
grid-template-areas:'a b c'
'd e f'
'g h i';
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
display:grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
grid-template-areas:'a b c'
'd e f'
'g h i';
}
#container div{
font-size: 2em;
text-align: center;
color: #222;
border: 1px solid #222;
}
.item1{
grid-area: i;
background-color: #ef342a;
}
.item2{
grid-area: h;
background-color: #f68f26;
}
.item3{
grid-area: g;
background-color: #4ba946;
}
.item4{
grid-area: f;
background-color: #0376c2;
}
.item5{
grid-area: e;
background-color: #c077af;
}
.item6{
background-color: #f8d29d;
grid-area: d;
}
.item7{
grid-area: a;
background-color: #b5a87f;
}
.item8{
grid-area: b;
background-color: #d0e4a9;
}
.item9{
grid-area: c;
background-color: #4dc7ec;
}
</style>
</head>
<body>
<div id="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
上面代码就是9个单元格，子元素虽然是按照1-9的顺序书写的html代码，可是我在每个子元素上设置他们对应的grid-area坐标，他们就会去相应的地点。
实例布局
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
display: grid;
grid-template-columns:repeat(12,1fr);
grid-template-rows: 50px 200px 50px;
grid-template-areas:
'h h h h h h h h h h h h'
'm m m m m m m m m m a a'
'f f f f f f f f f f f f';
}
.head{
grid-area: h;
background-color: #f8d29d;
}
.aside{
grid-area: a;
background-color: #c077af;
}
.main{
grid-area: m;
background-color: #4dc7ec;
}
.footer{
grid-area: f;
background-color: #d0e4a9;
}
</style>
</head>
<body>
<div class="container">
<div class="head">header</div>
<div class="aside">aside</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</body>
</html>
通过区域实现的一种响应式布局
在区域中可以使用.这个来占位，代表这个位置没有东西，空白
示例代码
上面的方法通过grid属性模拟栅栏布局，来实现各种功能。而这个响应式的实现，不再是需要使用html+css实现aside的移动，而只需要改变css中的grid-areas属性即可实现
而这样纯css代码实现div的移动，我们可称之为源代码的独立性，即html只是用来标记内容，css来设计样式。
tip:最后补充一点 区域的命名会影响到网格线，每个区域的起始网格线会自动命名为"区域名-start"，终止网格线自动命名为"区域名-end"。
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，在开始放入第二行。
而这个顺序由grid-auto-flow属性决定，默认值是row,及先行后列,也可以将他设成columns，变成"先列后行"。
column : 1 4 7 row : 1 2 3
2 5 8 4 5 6
3 6 9 7 8 9
grid-auto-flow属性除了设置成row和column,还可以设成 row dense 和 columns dense。 这两个值主要用于，某些项目指定位置以后，剩下的项目怎么放置
row dense : 先填满横行，尽量不出现空格
column dense : 先填满列，尽量不出现空格
容器内子元素的属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网络线
grid-column-start : 左边框所在的垂直网格线
grid-column-end : 右边框所在的垂直网格线
grid-row-start : 上边框所在的水平网格线
grid-row-start : 下边框所在的水平网格线
例：
.item1{
grid-column-start:2;
grid-column-end:4;
}
/*起始于第二根网格线，第四根垂直网格线结束*/
Gird(2)的更多相关文章
- PB gird类型数据窗口 设置分组、分组小计、合计
今天遇到一个需求,gird表格数据如下: 部门 类型 数据 A 类型1 1 A 类型2 2 B 类型1 3 B 类型2 4 合计 10 实际需要显示的结果为: 部门 ...
- selenium Gird
selenium-server selenium Gird testcase-----------------hub -------------------node1 ---------------- ...
- 使用Gird++打印出现“Retrieving the COM class factory for component with CLSID”的解决办法
我们的接口需要返回一个gird++生成PDF文件的二进制数据,在本地测试都很好,发布到服务器上一直出现“Retrieving the COM class factory for component w ...
- RAC安装gird,第一个节点执行root.sh报"The ora.asm resource is not ONLINE"错误
RAC版本:11.2.0.4 OS版本:linux 6.4 RAC安装gird,第一个节点执行root.sh运行失败,报"The ora.asm resource is not ONLINE ...
- clientdataset 读取excel 如果excel 文件不存在的时候 相应的gird 会不显示数据， 鼠标掠过 gird 格子 才会显示数据。 这是一个bug 哈哈
clientdataset 读取excel 如果excel 文件不存在的时候 相应的gird 会不显示数据, 鼠标掠过 gird 格子 才会显示数据. 这是一个bug 哈哈
- EXTJS 动态改变Gird 列值
var me = this.getView('EditProProductQrcodePanel'); var grid = me.down("[name=mallQrcodeGrid] ...
- Display Voxel Gird and PCA
https://github.com/yhexie/NDTEX 最近科研没有思路,写点代码加强基础知识的学习吧. 下面写了一个点云体素分割,PCA计算体素内点云的特征值和特征向量.
- 代码演示用 KnockoutJS 和 Web API 对一个表格（Gird）进行 CRUD 操作，在 MVC 5 下
实体类: using System; using System.Collections.Generic; public partial class EmployeeInfo { public int ...
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
引言 贴一个grid 的例子先: 有这样一个需求: 1. 给 Grid(or Tree Grid)添加一列, 这一列显示是Button. 点击之后可以对这一行进行一些操作 2. 这一列每一行对应的按钮 ...
- [Ext JS 4] 实战之Grid, Tree Gird编辑Cell
前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...
随机推荐
- linux-centos7 gcc 简单使用
在虚拟机VirtualBox 安装CentOS6.3后,默认是没有安装gcc. 进入root,命令 yum -y install gcc gcc-c++ autoconf ...
- Java 架构知识点整理
架构学习 1. Java 核心技术 1.1. 基础知识 1.1.1. 进制转换 1.1.2. 异常处理 1.1.3. List 分批代码 1.1.4. 字符串分割 1.1.5. 编码风格 1.2. 并 ...
- CSS Module解决全局或本地使用@keyframes无效问题
最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...
- javaIO编码详解
原创 输出流 有哪些构造方法可以在参数上设置编码格式 PrintStream(File file, String csn) PrintStream(String fileName, String cs ...
- 【SpringBoot MQ 系列】RabbitMq 核心知识点小结
[MQ 系列]RabbitMq 核心知识点小结 以下内容,部分取材于官方教程,部分来源网络博主的分享,如有兴趣了解更多详细的知识点,可以在本文最后的文章列表中获取原地址 RabbitMQ 是一个基于 ...
- 在4K屏下以超过VMWare默认的最高分辨率运行Linux系统
前言 4K 屏,有其优点也有其弊端.优点就是分辨率高,字体和图标看起来如丝一般顺滑:缺点就是字体和图标小,费眼睛.解决这个缺点的方法也很简单粗暴,就是将系统的显示比例放大.在高分屏不很普及的时候,无论 ...
- [scrapy]安装报错: Twisted安装错误
http://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted 下载whl文件 然后 pip install <whl文件名> 安装 Scrapy s ...
- JS中map与forEach的区别
很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...
- Linux系统之网络文件共享与数据实时同步实践
1.实现基于MYSQL验证的vsftpd虚拟用户访问 首先环境说明,数据库服务器是192.168.0.10,vsftpd服务器是192.168.0.30 1)安装vsftpd [root@test-c ...
- Hibernate4.x 报错 Space is not allowed after parameter prefix ':'
1.问题描述 hibernate4.0使用原生sql: (SELECT a.user_id,(@rowno:=@rowno+1) as rowno,a.goods_value FROM n_wo ...