Как лучше сверстать такой макет?

Question

Как лучше сверстать такой макет? Есть два вида макета - под монитор 1366 и 1920 (ну и дизайн резиновый, под другие тоже должно подстраиваться)

Проблема с блоком основного контента с акциями и товарами среди них. Т.е. я пока не могу понять как выстроить хтмл. Возможно ли без применения js плагинов?

в макете под 1920 блоков больше, так как в макете под 1366 просто предполагается что остальные блоки будут ниже по нарисованному принципу.

Answer 1

Возможно без JS, сейчас для такого писать JS - это уже изврат. Проще всего это сделать на гридах. Можно прописать media-query для 1366, в котором грид меняет позиции ячеек, и они могут скрывать или переходить в другие места. Также можно делать на флексах, но тогда придётся морочиться. Пока не ясно как конкретно перестраиваются ваши блоки, поэтому пример написать не получится.

Вот пример, на 800px перестроение происходит:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
	
	<div class="container">
		
		<div class="grid">
			<div class="block block-blue">Пример блока синий</div>
			<div class="block block-red">Пример блока красный</div>
			<div class="block block-green">Пример блока зеленый</div>
			<div class="block block-gray">Пример блока серый</div>
			<div class="block block-viol">Пример блока фиолетовый</div>
		</div>
		
	</div>

	<style type="text/css">
		
		html, body, .container {
			height: 100%;
		}
		
		body {
			margin: 0;
		}
		
		.container {
			box-sizing: border-box;
			padding: 30px;
			height: 100%;
		}
		
		.grid {
			height: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			grid-column-gap: 30px;
			grid-row-gap: 30px;
		}
		
		.block {
			background-color: silver;
		}
		
		.block-blue {
			background-color: #00a6ff;
			grid-column: 1 / 3;
		}
		
		.block-red {
			background-color: #d2483b;
		}
		
		.block-green {
			background-color: #3c8e10;
			grid-column: 2 / 4;
			grid-row: 2 / 4;
		}
		
		.block-viol {
			background-color: mediumpurple;
		}
		
		@media screen and (max-width: 800px){
			
			.block-red {
				grid-column: 0 / 1;
				grid-row: 2 / 4;
			}
			
			.block-gray {
				display: none;
			}
			
		}
		
	</style>
	
</body>
</html>

БЛОГ НА HUSL

Как лучше сверстать такой макет?

Ответы (1 шт):