ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

grid - 网格项目跨行或跨列

2019-04-09 10:43:35  阅读:331  来源: 互联网

标签:Code color text 跨列 网格 column grid row


默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列。

 

1.可以通过设置grid-column-endgrid-column-start距离多个网络线号实现多个列跨越.

 

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 class='item'>5</view>
7   <view class='item'>6</view>
8   <view class='item'>7</view>
9 </view>
View Code

 

 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(3, 1fr);
12 }
13 
14 .item1 {
15   grid-column-start: 1;
16   grid-column-end: 4;
17   /* grid-row-start: 1;
18   grid-row-end: 4; */
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 }
View Code

 

 

grid-column-start: 1; 
grid-column-end: 4;

 

2.同样的可以通过grid-row-endgrid-row-start距离多个网格号实现多个行跨越

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 class='item'>5</view>
7   <view class='item'>6</view>
8   <view class='item'>7</view>
9 </view>
View Code
 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(3, 1fr);
12 }
13 
14 .item1 {
15   grid-row-start: 1;
16   grid-row-end: 4;
17 }
18 
19 .item {
20   text-align: center;
21   background-color: #d94a6a;
22 }
23 
24 .item1 {
25   text-align: center;
26   line-height: 300px;
27   background-color: #1aa034;
28 }
View Code
grid-row-start: 1;
grid-row-end: 4;

3.通过简写的grid-rowgrid-column也能实现多行或多列的跨越

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 class='item'>5</view>
7   <view class='item'>6</view>
8   <view class='item'>7</view>
9 </view>
View Code
 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(3, 1fr);
12 }
13 
14 .item1 {
15   grid-row: 2 / 5;
16   grid-column: 2 / 4;
17 }
18 
19 .item {
20   text-align: center;
21   background-color: #d94a6a;
22 }
23 
24 .item1 {
25   text-align: center;
26   line-height: 300px;
27   background-color: #1aa034;
28 }
View Code
grid-row: 2 / 5;
grid-column: 2 / 4;

 

 

4.关键词span后面紧随数字,表示合并多少个列或行

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 class='item'>5</view>
7   <view class='item'>6</view>
8   <view class='item'>7</view>
9 </view>
View Code
 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(3, 1fr);
12 }
13 
14 .item1 {
15   grid-row: 2 / span 3;
16   grid-column: span 2;
17 }
18 
19 .item {
20   text-align: center;
21   background-color: #d94a6a;
22 }
23 
24 .item1 {
25   text-align: center;
26   line-height: 300px;
27   background-color: #1aa034;
28 }
View Code
grid-row: 2 / span 3;
grid-column: span 2;

 

标签:Code,color,text,跨列,网格,column,grid,row
来源: https://www.cnblogs.com/cisum/p/10675367.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有