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-startgrid-row-endgrid-column-startgrid-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-rowgrid-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 - 通过网格区域命名和定位网格项目的更多相关文章

  1. grid - 隐式地命名网格区域名称

    通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置. 在这个示例中,行和列都具有inner-start和 ...

  2. Echarts学习记录——如何去掉网格线及网格区域颜色

    关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...

  3. CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明

    CSS3引入了新的网格布局(grid layout),以适应显示和设计技术的发展(尤其是移动设备优先的响应式设计). 主要目标是建立一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐 ...

  4. 使用ICEM绘制非结构网格时,如何提高网格质量?【转载】

    作者:杨淑娟 链接:https://www.zhihu.com/question/20851390/answer/26152732 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  5. grid - 通过网格线号码来定位网格项目

    网格线实际上是代表线的开始.结束. 两者之间就是网格列或行. 以下css仅对子元素生效 ,具体详情可以看后面示例 grid-row-start: 2; grid-row-end: 3; grid-co ...

  6. Fluent动网格【7】:网格节点运动

    在动网格中,对于那些既包含了运动也包含了变形的区域,可以通过UDF来指定区域中每一个节点的位置.这给了用户最大的自由度来指定网格的运动.在其他的动网格技术中(如重叠网格)则很难做到这一点.定义网格节点 ...

  7. Fluent动网格【13】:网格光顺总结及实例

    光顺(Smoothing)方法是最基本的网格节点更新方法.Fluent提供了三种光顺方法: Spring弹簧光顺 Diffusion扩散光顺 Linearly Elastic Solid光顺 三种方法 ...

  8. Fluent动网格【8】:网格节点运动案例

    Fluent动网格中的DEFINE_GRID_MOTION宏允许用户定义网格节点的运动.本案例演示采用DEFINE_GRID_MOTION宏指定边界节点的运动. 案例动网格效果如图所示. 案例描述 本 ...

  9. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

随机推荐

  1. 20165235 祁瑛 2018-3 《Java程序设计》第四周学习总结

    20165235 祁瑛 2018-3 <Java程序设计>第四周学习总结 教材学习内容总结 第五单云总结 (一)子类与继承1.java中子类只能有一个父类,在类名前用extends标记.2 ...

  2. node.js监听文件变化

    前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...

  3. 基于335X的UBOOT网口驱动分析

    基于335X的UBOOT网口驱动分析 一.软硬件平台资料 1.  开发板:创龙AM3359核心板,网口采用RMII形式 2.  UBOOT版本:U-Boot-2016.05,采用FDT和DM. 参考链 ...

  4. 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 ...

  5. DRF分页组件

    为什么要使用分页 其实这个不说大家都知道,大家写项目的时候也是一定会用的, 我们数据库有几千万条数据,这些数据需要展示,我们不可能直接从数据库把数据全部读取出来, 这样会给内存造成特别大的压力,有可能 ...

  6. Shell脚本笔记(二)Shell变量

    Shell变量 一)全局环境变量 全局变量对于定义它的shell和其子shell都是可见的,但如果生成它的shell被终止,全局变量也就消失了.另外全局变量会被子shell的同名变量覆盖. #定义一个 ...

  7. JVM笔记(二)JVM基本结构

    JVM基本结构 一.运行时内存区域 java虚拟机所管理的内存将会包括以下几个运行时内存区域. 1.程序计数器 Program Counter Register:可以看作当前线程(线程私有)所执行的字 ...

  8. tomcat修改端口号

    以前只知道当tomcat端口号冲突了如何修改tomcat默认的8080端口号 今天遇到个情况,装了个BO,自带个tomcat,这时就需要修改三个地方 修改Tomcat的端口号: 在默认情况下,tomc ...

  9. 劈配 [多省省选] [BZOJ5251] [网络流]

    题目链接 分析: 这道题看题都看了我好久... 我们可以容易想到这道题和网络流有关. 首先,从原点向每个学员连一条流量为1的边 然后,要限制每个导师的学员,在每个导师连到汇点的时候流量限制为bi 再接 ...

  10. 判断浏览器的类型$_SERVER['HTTP_USER_AGENT']和语言$_SERVER['HTTP_ACCEPT_LANGUAGE']

    判断浏览器类型: $_SERVER["HTTP_USER_AGENT"] 判断浏览器类型的具体程序如下: <?php if(strpos($_SERVER["HTT ...