Как сверстать такую штуку?

Question

[Алекс]

Добрый день как на гридах заверстать такую штуку(см скр) . Js не хотелось бы использовать.Спасибо

Comments

[dicem]

https://grid.layoutit.com/ в помощь

[Lynn «Кофеман»]

И в чём проблема?

[Алекс]

dicem, да спасибо то что надо

[Алекс]

dicem, напишите в ответ, отмечу решением

Answer 1

[dicem]

https://grid.layoutit.com/ в помощь

Answer 2

[Vad Sim]

Таблица с colspan и rowspan в td

Comments

[gBACTAKAHA]

Вы из прошлого? 20 лет прошло, а все таблицы....

[fallus]

:) Ну а шо, ведь прав же.

[Vladislav]

fallus, что можно да, а так человек отстал от реальности

Answer 3

[gBACTAKAHA]

<div class="grid">
  <div class="block block__one"></div>
  <div class="block block__two"></div>
  <div class="block block__three"></div>
  <div class="block block__four"></div>
  <div class="block block__five"></div>
  <div class="block block__six"></div>
  <div class="block block__seven"></div>
</div>

.grid {
  display: grid;
  grid-template: repeat(6, 4rem)/repeat(4, 8rem);
  gap: 0.5rem;
  max-width: 960px;
  margin: auto;
}
.block {
  border: 2px solid red;  
}
.block__one {
  grid-row: span 4;
}
.block__two {
  grid-column: span 2;
  grid-row: span 2;
}
.block__three {

  grid-row: span 3;
}
.block__four {
  grid-column: span 2;
  grid-row: span 2;
}
.block__five {
 
  grid-row: span 3;
}
.block__six {
  grid-row: span 2;
  grid-column: span 2;
}
.block__seven {
  grid-row: span 2;

}

Codepen.io

Answer 4

[Vladislav]

С помощью grid layout конечно, а так не трольте пользователя со своими таблицами и не вводите его в заблуждение. В принципе можно и флексами сделать с помощью своей сетки, но это муторно, поэтому гриды в помощь. Если особо в них не шаришь, есть хорошие онлайн генераторы, по типу этого https://basicweb.ru/css/grid_generator.php