grid - 网格项目层级
网格项目可以具有层级和堆栈,必要时可能通过z-index
属性来指定.
1.在这个例子中,item1
和item2
的开始行都是1
,item1
列的开始是1
,item2
列的开始是2
,并且它们都跨越两列。两个网格项目都是由网格线数字定位,结果这两个网格项目重叠了。
默认情况下,item2
在item1
上面,但是,我们在item1
中设置了z-index:1;
,导致item1
在item2
之上。
<view class="grid">
<view class='item1'>1</view>
<view class='item2'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
<view class='item'>5</view>
<view class='item'>6</view>
<view class='item'>7</view>
<view class='item'>8</view>
<view class='item'>9</view>
</view>
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
} .item1 {
} .item1, .item2 {
grid-row-start:;
grid-column-end: span 2;
} .item1 {
grid-column-start:;
z-index:;
} .item2 {
grid-column-start:;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1,.item2 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
2.一个网格项目定位和分层使用了grid-template-areas
定义的隐式网格线的名称
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
} .item1 {
} .item1, .item2 {
grid-row-start:;
grid-column-end: span 2;
} .item1 {
grid-row-start: header-start;
grid-row-end: content-end;
grid-column-start: content-start;
grid-column-end: sidebar-start;
z-index:;
} .item2 {
grid-column-start:;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1, .item2 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
grid - 网格项目层级的更多相关文章
- grid - 网格项目对齐方式(Box Alignment)
CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式. <view class="grid"> <view class='ite ...
- grid - 网格项目跨行或跨列
默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列. 1.可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越. <view cl ...
- grid - 通过网格区域命名和定位网格项目
1.像网格线名称一样,网格区域的名称也可以使用grid-template-areas属性来命名.引用网格区域名称也可以设置网格项目位置. 设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空 ...
- grid - 使用相同的名称命名网格线和设置网格项目位置
1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...
- grid - 通过网格线名称设置网格项目位置
使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似. 1.引用网格线名称的时候不应该带方括号 <view class="grid"> <view ...
- grid - 通过网格线号码来定位网格项目
网格线实际上是代表线的开始.结束. 两者之间就是网格列或行. 以下css仅对子元素生效 ,具体详情可以看后面示例 grid-row-start: 2; grid-row-end: 3; grid-co ...
- 从 NavMesh 网格寻路回归到 Grid 网格寻路。
上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- Grid 网格布局
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...
随机推荐
- 复制数组之System.arraycopy()的使用
System.arraycopy(src, srcPos, dest, destPos, length); [参数说明](注:arraycopy是一个古老的方法,从jdk1.0就有了,而当时命名并不规 ...
- Python编译安装遇到的问题
1.python在make时候报错 Python build finished, but the necessary bits to build these modules were not foun ...
- Java常用API——String字符串运算
一.字符串运算 String类 1.概述 String是特殊的引用数据类型,它是final类. 2.构造方法 String str = "abc"; 相当于: char date ...
- .NET Core 2.0应用程序大小减少50%
.NET Core 2.0应用程序减小体积瘦身官方工具 IL Linker. IL Linker 来源于mono的linker https://github.com/mono/linker,目前还是 ...
- CSS-选择器权重计算
权重计算规则 内联样式,如: style=" ",权值为1000. ID选择器,如:#content,权值为0100. 类,伪类和属性选择器,如.content,权值为0010. ...
- sql - 递归update
declare v_rlt ):; l_sql ); -- variable that contains a query l_c sys_refcursor; -- cursor variable(w ...
- python 3.6 + numpy + matplotlib + opencv + scipy 安装
首先,下载并安装 python3.6: 然后,在网址http://www.lfd.uci.edu/~gohlke/pythonlibs/ 上 分别下载 numpy.scipy.matplotlib.o ...
- mysql高级、索引
一.mysql高级 1.视图 # 引子 select * from emp left join dep on emp.dep_id = dep.id union select * from emp r ...
- Stanford CoreNLP使用需要注意的一点
1.Stanford CoreNLP maven依赖,jdk依赖1.8 <dependency> <groupId>edu.stanford.nlp</groupId&g ...
- 第一章 C++ primer Plus
第一章 1.4程序创建的技巧 大体如下: 1.使用文本编辑器编写程序,并将其保存到文件中,这个文件就是程序的源代码. 2.编译源代码.这意味着运行一个程序,将源代码翻译为主机使用的内部语言——机器语言 ...