一图搞定grid布局，代码注释简单明了

<template>
	<view class="mian">
		<view class="item item-1">1</view>
		<view class="item item-2">2</view>
		<view class="item item-3">3</view>
		<view class="item item-4">4</view>
		<view class="item item-5">5</view>
		<view class="item item-6">6</view>
		<view class="item item-7">7</view>
		<view class="item item-8">8</view>
		<view class="item item-9">9</view>
		<view class="item item-10">10</view>	
	</view>
</template>

<style>
	/* 容器属性 */
	.mian{
		display: grid;
		width: 600rpx;
		height: 600rpx;
		border: 10rpx solid skyblue;
		/* item行和列布局 */
		/* grid-template-columns: 100rpx 100rpx 100rpx;横排分3个item,每个宽100rpx */
		/* grid-template-columns: repeat(3,100rpx);上面的简写 */
		/* grid-template-columns: 1fr 1fr 1fr;横排分3个item，每个宽度相等并自适应容器 */
		/* grid-template-columns: repeat(3,1fr);上面的简写 */
		/* grid-template-columns: repeat(auto-fill,100rpx);横排item数量自适应容器,每个宽100rpx; */
		/* grid-template-columns: 1fr minmax(100rpx,1fr);横排第2个item最小宽100rpx最大宽1fr */
		/* grid-template-columns: 100rpx auto 100rpx;横排第2个item宽度自适应 */
		grid-template-columns:[c1]100rpx [c2]100rpx [c3] 100rpx[c4];/* 用[]定义每个item周围网格线名,方便后面引用 */
		grid-template-rows: 100rpx 100rpx 100rpx 100rpx;/*竖排四个item,每个高100rpx（竖排属性跟横排类似，简略） */
		/* item的间距 */
		/* column-gap:20rpx;横排item间隔20rpx */
		/* row-gap:20rpx;竖排item间隔20rpx */
		/* gap:20rpx 20rpx;上面2属性合并简写 */
		
		/* item的区域 */
		/* grid-template-areas: 'a b c'
							 'd e f'
							 'g h i';每个字母代表一个区域 */
		/* grid-template-areas: 'a a a'
							 'b b b'
							 'c c c';相同字母代表同一区域 */
		/* grid-template-areas: 'a . a'
							 	'b . b'
							 	'c . c';不需要划分区域的item用（.）表示 */
		/* grid-auto-flow:row;	item横着排				 */
		/* grid-auto-flow:column;	item竖着排				 */
		/* justify-items:start;item横向左对齐 */
		/* justify-items:end;item横向右对齐 */
		/* justify-items:center;item横向居中对齐 */
		/* justify-items:stretch;item铺满容器 */
		/* anlign-items:...;item竖向...(跟横向对应) */
		/* place-items:center center;上面二属性合并简写 */
		
		/* justify-content:conter;整个容器横向居中对齐 */
		/* anlign-content:conter;整个容器竖向居中对齐 */
		
		/* grid-auto-columns/grid-auto-rows;用来设置多出来的项目 */
							 	
	}
	
	.item{
		font-size: 50rpx;
		background-color: #E91E63;
		color: #fff;
	}
/* 	项目属性 */
	.item-1{
		background-color: #ef342a;
		/* grid-column-start:1;这个itme位置横向从第1根网格线开始 */
		/* grid-column-end:3;这个itme位置横向到第3根网格线结束 */
		/* grid-column:1/3上面二属性合并简写 */
		/* gird-row上面属性竖向 */
		
		/* grid-area:b;把这个itme放在b区域 */
		
		/* justify-self:start | end | center | stretch 作用于单个项目的定位跟justify-items用法一致*/
		/* align-self:start | end | center | stretch;竖向 */
		/* place-self:center center;上面二属性合并简写 */
		
	}
	.item-2{
		background-color: #f68f26;
	}
	.item-3{
		background-color: #4ba946;
	}
	.item-4{
		background-color: #0376c2;
	}
	.item-5{
		background-color: #c077af;
	}
	.itme-6{
		background-color: #f8d29d;
	}
	.item-7{
		background-color: #b5a87f;
	}
	.item-8{
		background-color: #d0e4a9;
	}
	.item-9{
		background-color: #4dc7ec;
	}
	
	 
</style>