uniapp css grid九宫格布局

原创已于 2025-04-04 23:49:31 修改 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #uniapp

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

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;
}