Как разместить блоки html как на картинке?

Question

[tanik11]

Все числа от 1 до 8 расставить нужно

Comments

[Шохрух Шаймардонов]

Используя grid https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Ankhena]

CSS grid https://habr.com/ru/post/325760/ и далее
Отличная коротенькая игра для лучшего понимания гридов: https://cssgridgarden.com/#ru

Answer 1

[govboz]

<style>
  .div-wrapper {
    width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-auto-rows: 100px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    grid-template-areas:
    "d1 d1 d2 d4"
    "d1 d1 d3 d4"
    "d1 d1 d5 d6"
    "d7 d10 d8 d8"
    "d7 d9 d8 d8";
  }

  .div {
    background-color: #ccc;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .div-1 {
    grid-area: d1;
  }

  .div-2 {
    grid-area: d2;
  }

  .div-3 {
    grid-area: d3;
  }

  .div-4 {
    grid-area: d4;
  }

  .div-5 {
    grid-area: d5;
  }

  .div-6 {
    grid-area: d6;
  }

  .div-7 {
    grid-area: d7;
  }

  .div-8 {
    grid-area: d8;
  }

  .div-9 {
    grid-area: d9;
  }

  .div-10 {
    grid-area: d10;
  }

</style>

<section class="div-wrapper">
  <div class="div div-1">1</div>
  <div class="div div-2">2</div>
  <div class="div div-3">3</div>
  <div class="div div-4">4</div>
  <div class="div div-5">5</div>
  <div class="div div-6">6</div>
  <div class="div div-7">7</div>
  <div class="div div-8">8</div>
  <div class="div div-9">9</div>
  <div class="div div-10">10</div>
</section>