HTML, CSS верстка блоков, помогите пожалуйста расположить блоки как на картинке

Question

.allBlock{
    margin: 0 auto;
    width: max-content;
    height: 100%;
    border-radius: 5px;
    background-color: white;
    opacity: 0.9;
    padding: 10px;
    display: flex;
    gap: 10px;
}

.block{
    margin: 0 auto;
    padding: 30px;
    background-color: #12ffa8;
    border-radius: 5px;
    width: 650px;
    height: auto;
}

h3 {

    text-align: center;
    font-style: italic;
    font-size: 30px;
    color: black;
}

<section class="allBlock">


<div class="block-wrapper">
       
        <div class="block">
            <h3 class="h3">Текст</h3>
           
        </div>
    </div>




    <div class="block-wrapper">
       
        <div class="block">
            <h3 class="h3">Текст</h3>
           
        </div>
    </div>

    <div class="block-wrapper">
        <div class="block">
            <h3 class="h3">Текст</h3>
           
        </div>
   

  



</section>

Доброго времени суток!

Подскажите пожалуйста как разместить блоки как показано на картинке?

Answer 1

.container {
  height: 200px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.container>div {
  padding: 15px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 3;
  background: #8be8c3;
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
  background: #e88b8b;
}

.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background: #ad8be8;
}

<div class="container">
  <div class="div1"> 1 </div>
  <div class="div2"> 2 </div>
  <div class="div3"> 3 </div>
</div>

БЛОГ НА HUSL

HTML, CSS верстка блоков, помогите пожалуйста расположить блоки как на картинке

Ответы (1 шт):