grid - 通过网格区域命名和定位网格项目
1.像网格线名称一样,网格区域的名称也可以使用grid-template-areas
属性来命名。引用网格区域名称也可以设置网格项目位置.
设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空格符分开.
网格区域的名称,每组(单引号或双引号内的网格区域名称)定义了网格的一行,每个网格区域名称定义网格的一列.
<view class="grid">
<view class='item1'>1</view>
<view class='item'>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;
grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
} .item1 { } .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
2.grid-row-start
、grid-row-end
、grid-column-start
和grid-column-end
可以引用网格区域名称,用来设置网格项目位置.
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
} .item1 {
grid-row-start: header;
grid-row-end: header;
grid-column-start: header;
grid-column-end: header;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
3.简写的grid-row
和grid-column
也可以引用网格区域名称,设置网格项目的位置
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
} .item1 {
grid-row: footer;
grid-column: footer;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
4.grid-area
简写属性也可以引用网格区域的名称来设置网格项目的位置
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
} .item1 {
grid-area: sidebar;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
grid - 通过网格区域命名和定位网格项目的更多相关文章
- grid - 隐式地命名网格区域名称
通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置. 在这个示例中,行和列都具有inner-start和 ...
- Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...
- CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明
CSS3引入了新的网格布局(grid layout),以适应显示和设计技术的发展(尤其是移动设备优先的响应式设计). 主要目标是建立一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐 ...
- 使用ICEM绘制非结构网格时,如何提高网格质量?【转载】
作者:杨淑娟 链接:https://www.zhihu.com/question/20851390/answer/26152732 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- grid - 通过网格线号码来定位网格项目
网格线实际上是代表线的开始.结束. 两者之间就是网格列或行. 以下css仅对子元素生效 ,具体详情可以看后面示例 grid-row-start: 2; grid-row-end: 3; grid-co ...
- Fluent动网格【7】:网格节点运动
在动网格中,对于那些既包含了运动也包含了变形的区域,可以通过UDF来指定区域中每一个节点的位置.这给了用户最大的自由度来指定网格的运动.在其他的动网格技术中(如重叠网格)则很难做到这一点.定义网格节点 ...
- Fluent动网格【13】:网格光顺总结及实例
光顺(Smoothing)方法是最基本的网格节点更新方法.Fluent提供了三种光顺方法: Spring弹簧光顺 Diffusion扩散光顺 Linearly Elastic Solid光顺 三种方法 ...
- Fluent动网格【8】:网格节点运动案例
Fluent动网格中的DEFINE_GRID_MOTION宏允许用户定义网格节点的运动.本案例演示采用DEFINE_GRID_MOTION宏指定边界节点的运动. 案例动网格效果如图所示. 案例描述 本 ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
随机推荐
- 20165235 祁瑛 2018-3 《Java程序设计》第四周学习总结
20165235 祁瑛 2018-3 <Java程序设计>第四周学习总结 教材学习内容总结 第五单云总结 (一)子类与继承1.java中子类只能有一个父类,在类名前用extends标记.2 ...
- node.js监听文件变化
前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...
- 基于335X的UBOOT网口驱动分析
基于335X的UBOOT网口驱动分析 一.软硬件平台资料 1. 开发板:创龙AM3359核心板,网口采用RMII形式 2. UBOOT版本:U-Boot-2016.05,采用FDT和DM. 参考链 ...
- ord() expected string of length 1, but int found
源代码是这样: s=b'^SdVkT#S ]`Y\\!^)\x8f\x80ism' key='' for i in s: i=ord(i)-16 key+=chr(i^32) prin ...
- DRF分页组件
为什么要使用分页 其实这个不说大家都知道,大家写项目的时候也是一定会用的, 我们数据库有几千万条数据,这些数据需要展示,我们不可能直接从数据库把数据全部读取出来, 这样会给内存造成特别大的压力,有可能 ...
- Shell脚本笔记(二)Shell变量
Shell变量 一)全局环境变量 全局变量对于定义它的shell和其子shell都是可见的,但如果生成它的shell被终止,全局变量也就消失了.另外全局变量会被子shell的同名变量覆盖. #定义一个 ...
- JVM笔记(二)JVM基本结构
JVM基本结构 一.运行时内存区域 java虚拟机所管理的内存将会包括以下几个运行时内存区域. 1.程序计数器 Program Counter Register:可以看作当前线程(线程私有)所执行的字 ...
- tomcat修改端口号
以前只知道当tomcat端口号冲突了如何修改tomcat默认的8080端口号 今天遇到个情况,装了个BO,自带个tomcat,这时就需要修改三个地方 修改Tomcat的端口号: 在默认情况下,tomc ...
- 劈配 [多省省选] [BZOJ5251] [网络流]
题目链接 分析: 这道题看题都看了我好久... 我们可以容易想到这道题和网络流有关. 首先,从原点向每个学员连一条流量为1的边 然后,要限制每个导师的学员,在每个导师连到汇点的时候流量限制为bi 再接 ...
- 判断浏览器的类型$_SERVER['HTTP_USER_AGENT']和语言$_SERVER['HTTP_ACCEPT_LANGUAGE']
判断浏览器类型: $_SERVER["HTTP_USER_AGENT"] 判断浏览器类型的具体程序如下: <?php if(strpos($_SERVER["HTT ...