uniapp初级入门-flex布局学习12-网格布局

代码

<template>
	<view>
		<view class="grid">
			<view class="grid-cell">
				
			</view>
			<view class="grid-cell">
				
			</view>
			<view class="grid-cell">
				
			</view>
		</view>
		
		<view class="grid2">
			<view class="row test1"></view>
			<view class="row"></view>
			<view class="row"></view>
			<view class="row"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

.grid{
	width: 100%;
	height: 200rpx;
	display: flex;
	padding: 10rpx;
	
	.grid-cell{
		flex: 1;
		background-color: red;
		border: 1px solid white;
		box-sizing: border-box;
	}
}

.grid2{
	width: 100%;
	height: 200rpx;
	display: flex;
	padding: 10rpx;
	
	.row{
		flex: 1;
		background-color: yellow;
		border: 1px solid black;
		box-sizing: border-box;
	}
	
	.test1{
		flex: 0 0 50%;
	}
	
	
}
</style>

图示