Как сделать такую grid сетку?

Question

[Sergey4562]

Полный чайник в Grid CSS. Нужно на скорях сделать вот такую сетку.
Обшарил весь интернет, именно такой не нашёл.
Сама сетка:



Кусок html кода

<div class="frontproject-item-list">
	<a class="frontproject-item-inner foobox" href="#"><img src="#" alt=""></a>
	<a class="frontproject-item-inner foobox" href="#"><img src="#" alt=""></a>
	<a class="frontproject-item-inner foobox" href="#"><img src="#" alt=""></a>
	<a class="frontproject-item-inner foobox" href="#"><img src="#" alt=""></a>
	<a class="frontproject-item-inner foobox" href="#"><img src="#" alt=""></a>
	<a class="frontproject-item-inner foobox" href="#"><img src="#" alt=""></a>
</div>

Comments

[Everybody_Lies]

masonry grid

[Михаил Р.]

Полный чайник в Grid CSS

Нужно на скорях сделать вот такую сетку

Фриланс в таких ситуация выручает, пробовали?

[Sergey4562]

Михаил Р., у нас в городе таких мест нет :(

[Сергей delphinpro]

Sergey4562,

у нас в городе таких мест нет :(

Смешно =) Что такое фриланс

[Sergey4562]

Сергей delphinpro, Быть умным - во время притвориться тупым))

Answer 1

[Сергей delphinpro]

Если именно такую, то делите столбики и строки вот так, и размещайте в ячейках картинки

Answer 2

[Undefiend]

Можно таким образом:
Построить таблицу примерно такого формата и раскидать фото по ячейкам. Далее объединить некоторые ячейки для формирования точно такого формата как у Вас и выставить размеры ячеек в % соотношении. Если подходит такой вариант, могу накидать исходник

P. S. Я лично не берусь делать теми способы, которыми не умею. Если не хватает своих знаний для реализации, то лучше выучить нужный материал, а потом самому всё сварить.

Answer 3

[Sergey4562]

.frontproject-item-list {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
}

.frontproject-item-inner {
  border-radius: .5rem;
  overflow: hidden;
}

.frontproject-item-inner:nth-of-type(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
}

.frontproject-item-inner:nth-of-type(2) {
  grid-column: 1 / 3;
  grid-row: 6 / 14;
}

.frontproject-item-inner:nth-of-type(3) {
  grid-column: 3 / 5;
  grid-row: 1 / 5;
}

.frontproject-item-inner:nth-of-type(4) {
  grid-column: 3 / 4;
  grid-row: 5 / 9;
}

.frontproject-item-inner:nth-of-type(5) {
  grid-column: 4 / 5;
  grid-row: 5 / 9;
}

.frontproject-item-inner:nth-of-type(6) {
  grid-column: 3 / 5;
  grid-row: 9 / 14;
}

.frontproject-item-inner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

Автор soledar10