grid - 通过网格线名称设置网格项目位置
项目 设置 通过 位置 名称 网格 Grid
2023-09-11 14:14:36 时间
使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似.
1.引用网格线名称的时候不应该带方括号
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <view class="grid">
2 <view class='item1'>1</view>
3 <view class='item'>2</view>
4 <view class='item'>3</view>
5 <view class='item'>4</view>
6 </view>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 page {
2 color: #fff;
3 font-size: 16px;
4 }
5
6 .grid {
7 /* padding: 1%; */
8 display: grid;
9 grid-gap: 1px;
10 line-height: 100px;
11 /* grid-template-columns: repeat(2, 1fr); */
12 }
13
14 .item1 {
15 grid-row-start: row-2-start;
16 grid-row-end: row-end;
17 grid-column-start: col-2-start;
18 grid-column-end: col-end;
19 }
20
21 .item {
22 text-align: center;
23 background-color: #d94a6a;
24 }
25
26 .item1 {
27 text-align: center;
28 /* line-height: 300px; */
29 background-color: #1aa034;
30 }
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
2.grid-row
和grid-column
简写属性也适用于网格线名称,也可以用来设置网格项目的位置
grid-row: row-2-start / row-end; grid-column: col-2-start / col-end;
相关文章
- 海尔印度项目的APN设置问题
- DSP5509项目之用FFT识别钢琴音调(4)之麦克风输入和Line in输入
- 新闻发布项目——数据实现类(UserDaoImpl)
- 项目异常
- IOS之UIImageView--小实例项目--带音效的拳皇动画
- Flutter: AnimatedList 一个滚动容器,可在插入或移除项目时为其设置动画
- 基于EasyNVR二次开发实现业务需求:直接集成EasyNVR播放页面到自身项目
- 前后端项目部署-6, flask+Gunicorn+gevent+supervisor+nginx+redis+mysql+mongodb+vue,docker-compose部署
- 入门 Maven:轻松配置、高效下载、快速构建Java项目
- VS2010打开VS2013的项目
- 应该是引用了项目本身!从引用中册除对所在项目的引用就可以了!
- Eclipse导入SpringBoot项目pom.xml第一行报错Unknown error
- NuxtJS项目——路由
- 直接拿来用!最火的Android开源项目(完结篇)
- 【课题总结】OpenCV 抠图项目实战(6)色彩范围抠图
- 将Gitee项目导入到Github
- 【前沿技术RPA】 一文了解UiPath的项目活动设置