Список (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>