uniapp css grid九宫格布局

—Qeyser

已于 2025-04-04 23:49:31 修改

阅读量175

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序 uni-app Html 文章标签： css 前端 uniapp

于 2025-03-10 19:00:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42581036/article/details/146161416

uni-app 同时被 3 个专栏收录

26 篇文章

订阅专栏

微信小程序

20 篇文章

订阅专栏

Html

19 篇文章

订阅专栏

html代码

<view class="view-list" style="">
    <view class="view-item" v-for="(item,index) in 10">
        {{item}}
    </view>
</view>

css代码

.view-list{
		width: 100%;
		margin-top:40rpx;
		margin-bottom: 40rpx;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows:repeat(2,1fr); ;
		gap: 30rpx;
}


.view-item{
	width: 100%;
	height: 450rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background-color:darkred;
}