CSS Grid 网格布局(入门)- 网格排序对 justify-content 的影响

在不同的网格排序下,justify-content网格水平对齐也会有不同的表现。来看看以下的实例:

css.css :

.wrap{
	margin: 50px;
	display: grid;
  grid-template-columns:30px 30px 30px;
	grid-template-rows: 30px 30px 30px;
	grid-auto-flow:row ;
	justify-content:space-around;
	width: 250px;
	height: 155px;
	border: 1px solid #ddd;
	text-align: center;
}
.item1{background-color: #fed75c94;}
.item2{background-color: #f2a3518c;}
.item3{background-color: #eb6053a6;}
.item4{background-color: #b75d918a;}
.item5{background-color: #6f5ba28a;}
.item6{background-color: #5bb98ca1;}
.item7{ background-color: #3d88c6a6;}
.item8{background-color: #fed75c94;}
.item9{ background-color: #eb6053a6;}

index.html :

<div class="wrap">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
	<div class="item6">6</div>
	<div class="item7">7</div>
	<div class="item8">8</div>
	<div class="item9">9</div>
</div>
grid_网格布局_水平对齐__排序row 5-2

当 grid-auto-flow:column 时,结果为 :

grid_网格布局_水平对齐__排序column 5-3