Как сверстать такую конструкцию в BS?

Question

[Евгений Михайлов]

Привет, подскажите как сверстать такое (см.картинку), где блок 1 - height: 100vh;

Сразу скажу вот так:

<div class="row">
	<div class="col-3">
		<img src="...">
	</div>
	<div class="col-9">
		<div class="row">
			<div class="col-6">
				<img src="...">
			</div>
			<div class="col-6">
				<img src="...">
			</div>
			<div class="col-6">
				<img src="...">
			</div>
			<div class="col-6">
				<img src="...">
			</div>
		</div>
	</div>
</div>

не подходит, так как все блоки выводятся php циклом

Answer 1

[Сергей delphinpro]

Добавить несколько строк своих стилей и не пытаться натянуть сову на глобус.

<div class="my-grid">
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
</div>

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  height: 100vh;
}
.my-cell:first-child {
  grid-row: span 2;
}

Answer 2

[Александр]

да и php циклом можно делать как вы написали, если логика есть. к примеру если элемент 1й, 6й, 11й то выводим большой блок, если нет то маленький

Comments

[Евгений Михайлов]

Да, но заказчик не хочет ...

spoiler

моя ошибка, надо было не посвящаться его в тонкости организации вывода контента )))