grid - 使用相同的名称命名网格线和设置网格项目位置
1.使用repeat()
函数可以给网格线分配相同的名称。这可以节省一定的时间
使用repeat()
函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称。
相同网格线名称指定网格线的位置和名称,也且会自动在网格线名称后面添加对应的数字,使其网格线名称也是唯一的标识符。
<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-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
} .item1 {
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
2. 使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开。
在这个示例中,item1
放置位置是row-start
第2
条开始,至row-end
的第3
条结束,这用来设置item1
在行的起始和结束位置;col-start
的第1
条开始,至col-start
的第3
条结束(col-start
的第3
条也对应的是col-end
的第2
条),用来设置item1
在列的起始位置和结束位置
<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-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
} .item1 {
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
grid - 使用相同的名称命名网格线和设置网格项目位置的更多相关文章
- grid - 通过网格线名称设置网格项目位置
使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似. 1.引用网格线名称的时候不应该带方括号 <view class="grid"> <view ...
- grid - 通过网格区域命名和定位网格项目
1.像网格线名称一样,网格区域的名称也可以使用grid-template-areas属性来命名.引用网格区域名称也可以设置网格项目位置. 设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空 ...
- grid - 通过网格线号码来定位网格项目
网格线实际上是代表线的开始.结束. 两者之间就是网格列或行. 以下css仅对子元素生效 ,具体详情可以看后面示例 grid-row-start: 2; grid-row-end: 3; grid-co ...
- grid - 隐式命名网格线名称
1.隐式的指定网格线反向指定了隐式的网格区域名称,命名的网格区域隐式的命名了网格线名称. 指定网格区域会给网格区域边线添加隐式的网格线名称.这些网格线的命名是基于网格区域来命名,只是在网格区域名称的后 ...
- Win7下C:\Users\Cortana以账户名称命名的系统文件夹用户名的修改
Win7下C:\Users\Cortana以账户名称命名的系统文件夹用户名的修改 Win7下C:\Users\Cortana以账户名称命名的系统文件夹用户名的修改 即修改Cmd命令提示符:C:\Use ...
- Win10下C:\Users\John以账户名称命名的系统文件夹用户名的修改
Win10下C:\Users\John以账户名称命名的系统文件夹用户名的修改.. 有时候我们由于各种原因想要更改DOS窗口下的账户名称,更改DOS窗口用户名C:\Users\XXX> 即更改为C ...
- 编写高质量代码改善C#程序的157个建议——建议125:避免用FCL的类型名称命名自己的类型
建议125:避免用FCL的类型名称命名自己的类型 试想过自己写一个Socket类型吗?如果没有,我们来尝试一下: public class Socket { //省略 } 把以上代码同某些其他工具类封 ...
- 2019-7-29-NetBIOS-计算机名称命名限制
title author date CreateTime categories NetBIOS 计算机名称命名限制 lindexi 2019-07-29 09:59:17 +0800 2018-12- ...
- Java中的名称命名规范:
Java中的名称命名规范:(不遵守,也不会出现编译的错误) 包名:多单词组成时所有字母都小写:xxxyyyzzz 类名.接口名:多单词组成时,所有单词的首字母大写:XxxYyyZzz 变量名.方法名: ...
随机推荐
- String str = new String("xyz") 会创建几个对象
转载:https://blog.csdn.net/andychen314/article/details/50857313 答案是 两个对象,要理解这个,就要知道string类的工作原理.下面来慢慢分 ...
- P1220 关路灯 区间dp
题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...
- 数据特征分析:1.基础分析概述& 分布分析
基础分析概述 几个基础分析思路: 分布分析 对比分析 统计分析 帕累托分析 正态性检测 相关性分析 分布分析 分布分析是研究数据的分布特征和分布类型,分定量数据.定性数据区分基本统计量. import ...
- HBase的概述和安装部署
一.HBase概述 1.HBase是Hadoop数据库,是一个分布式.可扩展的大数据存储. HBase是用于对大数据进行随机.实时读写访问的非关系型数据库,它的目标托管非常大的表——数十亿行N百万列. ...
- 00-JAVA语法基础--动手动脑
1.运行EnumTest.java,并分析结果,得出结论. 其源代码以及运行结果截图如下: 枚举类型的常量以字符串的形式顺序储.源代码中s和t不是原始数据类型.getCLass():取得当前对象所属的 ...
- gitalk报错问题
今天为了优化个人博客,将博客同时部署到Github和Coding,之后虽然博客访问速度相比以前有很大的提升,但是不知道gitalk评论会莫名出现问题 问题 点击使用GitHub登陆会跳转到个人博客主页 ...
- linux 进阶命令
进阶命令 1 df指令 查看磁盘的空间 # df -h -h表示可读性更高,方便读取 执行指令后(Filesystem:磁盘名称 size:磁盘总大小 Used: 被使用的大小 ...
- AGC 030D.Inversion Sum(DP 期望)
题目链接 \(Description\) 给定长为\(n\)的序列\(A_i\)和\(q\)次操作\((x,y)\).对于每次操作\((x,y)\),可以选择交换\(A_x,A_y\)两个数,也可以选 ...
- CC2431 代码分析②-CC2431狂轰滥炸
CC2431 code review : CC2431 狂轰滥炸 在上一篇中的最后我们分析到CC2431 开始喊出第一声,这里我们逐步分析从第一声到后面的狂轰滥炸! 上代码 /************ ...
- Ubuntu卸载软件
在终端中输入 sudo dpkg --list 查看已安装的软件,得知需要卸载的软件名为<programme> 再输入 sudo apt-get --purge remove <pr ...