使用网格线名称设置网格项目位置使用网格线号码设置网格项目位置类似.

1.引用网格线名称的时候不应该带方括号

 <view class="grid">
<view class='item1'>1</view>
<view class='item'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
</view>
 page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
/* grid-template-columns: repeat(2, 1fr); */
} .item1 {
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;

  

2.grid-rowgrid-column简写属性也适用于网格线名称,也可以用来设置网格项目的位置

grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;

  

grid - 通过网格线名称设置网格项目位置的更多相关文章

  1. grid - 使用相同的名称命名网格线和设置网格项目位置

    1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...

  2. grid - 通过网格区域命名和定位网格项目

    1.像网格线名称一样,网格区域的名称也可以使用grid-template-areas属性来命名.引用网格区域名称也可以设置网格项目位置. 设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空 ...

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

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

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

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

  5. grid - 隐式命名网格线名称

    1.隐式的指定网格线反向指定了隐式的网格区域名称,命名的网格区域隐式的命名了网格线名称. 指定网格区域会给网格区域边线添加隐式的网格线名称.这些网格线的命名是基于网格区域来命名,只是在网格区域名称的后 ...

  6. grid - 网格项目层级

    网格项目可以具有层级和堆栈,必要时可能通过z-index属性来指定. 1.在这个例子中,item1和item2的开始行都是1,item1列的开始是1,item2列的开始是2,并且它们都跨越两列.两个网 ...

  7. grid - 网格项目跨行或跨列

    默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列. 1.可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越. <view cl ...

  8. grid - 网格项目对齐方式(Box Alignment)

    CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式. <view class="grid"> <view class='ite ...

  9. Python用matplotlib绘图网格线的设置

    一.X轴网格线的设置 import matplotlib.pyplot as plt import numpy as np from pylab import mpl mpl.rcParams['fo ...

随机推荐

  1. JavaMelody 项目性能监控和调优工具

    转自 JavaMelody 可以实现对内存.CPU.线程.JDBC 连接数.HTTP 请求执行时间.SQL 执行时间(分析 Top SQL).方法执行时间(分析系统方法性能瓶颈)等等的监控. 配置方式 ...

  2. Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑

    Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑 前言 基于 python27 的 pyc 很容易被反编译,于是想到了pyd,加速运行,安全保护 必要准备 安装 ...

  3. POJ 2488 A Knight's Journey-dfs

    题目链接:http://poj.org/problem?id=2488 题目解读:首先得弄清楚国际象棋中关于“马走日”的规则,如上图中的马,它的下一步的走法有8中,所以对每一个位置的马,它所能走的8个 ...

  4. HDU 2242 考研路茫茫—空调教室 (边双连通+树形DP)

    <题目链接> 题目大意: 给定一个连通图,每个点有点权,现在需要删除一条边,使得整张图分成两个连通块,问你删除这条边后,两联通块点权值和差值最小是多少. 解题分析: 删除一条边,使原连通图 ...

  5. hdu 3001 Travelling (三进制)【状压dp】

    <题目链接> 题目大意: 给出n个点和m条边,求经过所有点所需的最小花费,每个点最多经过两次. 解题分析: TSP问题类型,由于此题每个点有三种状态,所以采用三进制状态压缩,0.1.2 分 ...

  6. hr相关的

    1.自我介绍? 2.为什么要离职?之前几家公司离职的原因分别是什么? 3.从上一家公司离职的原因? 4.目前就职的公司最大的收获是什么? 从上家公司到目前公司的最大收获是什么,要突出目标明确,在当前的 ...

  7. hibernate log4j 输出sql

    applicationContext.xml <bean id="sessionFactory"        class="org.springframework ...

  8. Codeforces.1082E.Increasing Frequency(思路)

    题目链接 \(Description\) 给定\(n\)个数.你可以选择一段区间将它们都加上或减去任意一个数.求最终序列中最多能有多少个数等于给定的\(C\). \(n\leq5\times10^5\ ...

  9. 潭州课堂25班:Ph201805201 django 项目 第二课 git 版本控制 (课堂笔记)

    安装 git sudo apt-get install git 查看版本信息: git --version 演示: 创建个项目 创建文件夹 如果要对这个文件夹进行版本控制 先进到这个文件夹中, 命令查 ...

  10. [PA2014]Kuglarz

    [PA2014]Kuglarz 题目大意: 有一个长度为\(n(n\le2000)\)的0/1串,你可以花\(c_{i,j}\)的钱,询问区间\([i,j]\)的异或和.问至少要多少元才能知道原来的序 ...