@tanik11

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

Все числа от 1 до 8 расставить нужно
  • Вопрос задан
  • 147 просмотров
Решения вопроса 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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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