列表 (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>