Задать вопрос
Ответы пользователя по тегу IT-образование
  • Как разместить блоки html как на картинке?

    @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>
    Ответ написан
    Комментировать