@astrodeep

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

Добрый день как на гридах заверстать такую штуку(см скр) . Js не хотелось бы использовать.Спасибо
601fba7abbdbc603711041.png
  • Вопрос задан
  • 254 просмотра
Пригласить эксперта
Ответы на вопрос 3
Vadessa
@Vadessa
Разработаю всё,что надо
Таблица с colspan и rowspan в td
Ответ написан
@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
Ответ написан
SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик
С помощью grid layout конечно, а так не трольте пользователя со своими таблицами и не вводите его в заблуждение. В принципе можно и флексами сделать с помощью своей сетки, но это муторно, поэтому гриды в помощь. Если особо в них не шаришь, есть хорошие онлайн генераторы, по типу этого https://basicweb.ru/css/grid_generator.php
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы