Как отпозиционировать элементы как на фото?

Question

[komtazi]

Ребят помогите пожалуйста, как это отпозиционировать на гридах, может есть примеры

Comments

[Вадим]

А что у Вас не получилось?

[Вадим]

очень похожий пример есть в документации.
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[komtazi]

Вадим,

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

[Вадим]

komtazi, классно, а теперь разметку и css от этого участка.

[komtazi]

Вадим,

display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 1em;
}

Была модератор удалил просто)

[komtazi]

Вадим, Я как понял это можно сделать и флексами, но гридами наверное правильнее было бы

[Вадим]

komtazi, можно. Но разметку Вы всё так же не показываете и в документации, видимо, пример не посмотрели

[komtazi]

Вадим, Если вы про это
То я посмотрел, но не понял как это реализовать в моем примере.
HTML

<div class="main-firma__photo">
								<div class="photo__group">
									<div class="group__first">
										<img src="./img/first1.png" alt="">
									</div>
									<div class="group__second">
										<img src="./img/image 92.png" alt="">
									</div>
									<div class="group__three">
										<img src="./img/image 90.png" alt="">
									</div>
								</div>
							</div>

display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 1em;
}

[Ankhena]

komtazi, осталось для group__three задать чтобы он занимал две клеточки.
grid-column: span 2
Ну и с размерами разобраться.

[komtazi]

Ankhena, Спасибо большое)

[alpprom63]

<div class="grid">

<div class="grid-item1"></a>
    <p>Слева</p>
  </div>
  <div class="grid-item2">
    <p>Справа</p> 
  </div>
  <div class="grid-item3">
    <p>Снизу центр</p> 
  </div>
   </div>

.grid {
  width: 900px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 230px;
  gap: 10px;
}

.grid > div {
padding: 0 5px 15px 12px;
display: flex;
align-items: flex-end;
border-radius: 10px;
}



.grid-item1  {
grid-row: 1;
grid-column: 1;
background: url(https://i.pinimg.com/236x/f3/fe/1d/f3fe1dd69bf54aa4822e9aab096afc62.jpg) no-repeat center/cover;
position: relative;
z-index: 2;
}

.grid-item2 {
  grid-row: 1;
  grid-column: 2;
  background: url(https://i.pinimg.com/236x/f3/fe/1d/f3fe1dd69bf54aa4822e9aab096afc62.jpg) no-repeat center bottom/cover;
  position: relative;
  text-align: left;
}

.grid-item3 {
  grid-row: 2;
  grid-column: span 2;
  position: relative;
  background: url(https://i.pinimg.com/236x/f3/fe/1d/f3fe1dd69bf54aa4822e9aab096afc62.jpg) no-repeat center/cover;
}

Answer 1

[komtazi]

komtazi, осталось для group__three задать чтобы он занимал две клеточки.
grid-column: span 2
Ну и с размерами разобраться.
Написано 2 минуты назад