列表（UL / LI）显示为网格-响应式（使用Bootstrap）

Question

有什么办法可以创建这样的画廊

使用无序列表进行引导？我已经完成了使用列系统的外观，但是我确实需要在该项目中使用li项目。

所以基本上我想创建一个显示为网格的列表。它也需要响应。我希望它可以在移动设备上变成一栏式：

我之所以要使用ul / li，是因为我将使用wordpress，并且希望使用wp_list_pages函数。

这可能很容易，但我只是想不出一种不涉及解决方法的解决方案。

谢谢！

Answer 1

如果使用CSS网格，这会更容易：

	.gallary{
		margin-top:50px;
	width:80%;
		height:100%;
	display: grid;
	grid-template-columns: 1fr 0.5fr 1fr;
	grid-template-rows: 300px 200px;
	
	
}
.area1{
	grid-column: 1/2;
		grid-row: 1/2 ;
	background-color: blue;

}
.area2{
	grid-column:  2/4;
		grid-row:  1/1;
		background-color: yellow;
}
.area3{
	grid-column:  1/2;
		grid-row:  2/2;
		background-color: green;
}
.area4{
	grid-column:  2/3;
		grid-row:  2/2;
		background-color: orange;
}
.area5{
	grid-column:  3/4;
		grid-row:  2/2;
		background-color: purple;
}
	@media (max-width: 650px) {
	
			.gallary{
		margin-top:50px;
	width:100%;
		height:100%;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	
	
}
		.area1{
	grid-column: 1/-1;
		grid-row: 1/2 ;
	background-color: blue;

}
.area2{
	grid-column: 1/-1;
		grid-row: 2/3 ;
		background-color: yellow;
}
.area3{
	grid-column: 1/-1;
		grid-row: 3/4 ;
		background-color: green;
}
.area4{
	grid-column: 1/-1;
		grid-row: 4/5 ;
		background-color: orange;
}
.area5{
		grid-column: 1/-1;
		grid-row: 5/6;
		background-color: purple;
}
	}

	<div class="gallary">
	
	<div class="area1">AAA</div>
			<div class="area2">AAA</div>
			<div class="area3">AAA</div>
			<div class="area4">AAA</div>
			<div class="area5">AAA</div>
		
	</div>