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

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. quratz线程

    1.线程 在 Quartz 中,有两类线程,Scheduler 调度线程和任务执行线程,其中任务执行线程通常使用一个线程池维护一组线程. 2.调度线程 下面说明两种调度线程: Scheduler 调度 ...

  2. TF之RNN:实现利用scope.reuse_variables()告诉TF想重复利用RNN的参数的案例—Jason niu

    import tensorflow as tf # 22 scope (name_scope/variable_scope) from __future__ import print_function ...

  3. 牛客练习赛 26 B题 烟花【DP】(经典)

    <题目链接> 题目描述 小a有个烟花,每个烟花代表着互不相同的颜色,对于第个烟花,它有的概率点燃,现在小a要去点燃它们,他想知道产生颜色的期望个数 及 产生恰好产生种颜色的概率 输入描述: ...

  4. numpy学习笔记.

    import numpy as np import cv2 import matplotlib.pyplot as plt 一.数组的创建 1. 创建二维数组 np.array([ [1,2,3], ...

  5. webpack 4.x之搭建前端开发环境

    webpack是一个现代JavaScript应用程序的静态模块打包器,借用官网的一张图,它能够将一些预处理语言,js的最新语法转换成浏览器识别的内容.现在一般的前端框架都有比较成熟的脚手架,大多数对w ...

  6. os模块、os.path模块、shutil模块、configparser模块、subprocess模块

    一.os模块 os指的是操作系统 该模块主要用于处理与操作系统相关的操作,常用的是文件操作(读.写.删.复制.重命名). os.getcwd()  获取当前文件所在的文件夹路径 os.chdir()  ...

  7. 拓扑排序 --- AtCode - 3596

    题目链接: https://cn.vjudge.net/problem/1137733/origin 拓扑排序的基本思想: https://blog.csdn.net/qq_41713256/arti ...

  8. Linux基础(一)磁盘分区

    磁盘分区 一.磁盘结构 先来看看老磁盘 1)磁头(head):不解释 2)扇区(sector):磁盘的最小存储单位,大小为512bytes或者4k 3)磁道(trcack):扇区组成的一个圆 4)柱面 ...

  9. linux 文件打包压缩成.tar.gz

    tar czvf beian.drcluod.cn.20180509.tar.gz ./beian.drcloud.cn/*

  10. BZOJ3457 : Ring

    根据Polya定理: \[ans=\frac{\sum_{d|n}\varphi(d)cal(\frac{n}{d})}{n}\] 其中$cal(n)$表示长度为$n$的无限循环后包含$S$的串的数量 ...