grid - 網格項目跨行或跨列

本文轉載自查看原文 2019-04-09 10:27 500 2019 - grid

默認情況下網格項目跨度只有一個列和行，但可以跨越多個行和列。

1.可以通過設置grid-column-end和grid-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-end和grid-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-row和grid-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;

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 七：HTML之表格跨行跨列 latex制作表格-跨行跨列 Excel中復雜跨行跨列數據 javascript 將 table 導出 Excel ,可跨行跨列 java實現導出Excel(跨行，跨列) table合並單元格 colspan（跨列）和rowspan（跨行） HTML表格跨行、跨列操作(rowspan、colspan) table合並單元格 colspan（跨列）和rowspan（跨行） JAVA導出excel如何設置表頭跨行或者跨列，跪求各位大神了 Latex 表格（跨行、跨列、背景加灰）new