grid - 网格项目跨行或跨列

最新推荐文章于 2025-06-07 19:11:43 发布

weixin_30565199

最新推荐文章于 2025-06-07 19:11:43 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： java python

原文链接：http://www.cnblogs.com/cisum/p/10675367.html

默认情况下，CSS Grid项目的跨度仅限一列一行，但可以通过设置属性来实现跨多行和多列。使用行和列的线号可以指定跨越的列数和行数，简写属性同样能完成这一效果，关键词后的数字定义了跨越的单元数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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