CSS例子: 横向排列的格子

效果

HTML

	<view class="content">
		<view class="item" v-for="item of 5">{{item}}</view>
	</view>

CSS

	.content {
		height: 100vh;
		display: flex;
		flex-direction: row; 
		flex-wrap: wrap;
		align-content: flex-start;
		background-color: aqua;
	}

	.item {
		width: 25%;
		height: 100rpx;
		border: 3rpx blueviolet solid;
		background-color: aquamarine;
	}

tailwindcss

	<view class="h-full flex flex-row flex-wrap content-start bg-green-600">
		<view class="w-1/4 h-[100rpx] border-[3rpx] border-solid border-black bg-red-600" v-for="item of 5">{{item}}</view>
	</view>