Как сделать 2 ячейки грид сверху и 3 снизу?

Question

[alola2231]

Как сделать, чтобы 2 большие ячейки сверху были, а 3 маленькие снизу?

<div class="welcome__content">

                    <div class="content__welcome">
                        <h2 class="content__welcome-title"> Ячейка</h2>
                        <p class="content__welcome-text"> </p>
                    </div>


                    <div class="content__welcome">
                        <h2 class="content__welcome-title"> Ячейка </h2>
                        <p class="content__welcome-text"> </p>
                    </div>


                    <div class="content__welcome">
                        <h2 class="content__welcome-title"> Ячейка</h2>
                        <p class="content__welcome-text"> </p>
                    </div>


                    <div class="content__welcome">
                        <h2 class="content__welcome-title"> Ячейка</h2>
                        <p class="content__welcome-text"> </p>
                    </div>

                    <div class="content__welcome">
                        <h2 class="content__welcome-title"> Ячейка</h2>
                        <p class="content__welcome-text"> </p>
                    </div>



                </div>

.welcome__content {
    text-align: center;
    display: grid;
    justify-content: center;
    grid-template-columns: 3fr 3fr 1fr 1fr 1fr;
    gap: 10px;
}

.content__welcome {
    border: 2px solid red;
}

Comments

[Ivan Ustûžanin]

а чем 6 колонок с первыми 2 детями растянутыми на 3 колонки и с последующими 3 детями растянутыми на 2 колонки не устроило?

[Андрей]

.welcome__content{
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}

.content__welcome:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.content__welcome:nth-child(2) { grid-area: 1 / 4 / 2 / 7; }
.content__welcome:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
.content__welcome:nth-child(4) { grid-area: 2 / 3 / 3 / 5; }
.content__welcome:nth-child(5) { grid-area: 2 / 5 / 3 / 7; }

либо так

.welcome__content{
display: grid;
  grid-template-columns: repeat(6, 1fr); 
  grid-template-rows: auto auto;
  gap: 10px; 
}


.content__welcome:nth-child(1),
.content__welcomek:nth-child(2) {
  grid-column: span 3;
  grid-row: 1; 
}

.content__welcome:nth-child(3),
.content__welcome:nth-child(4),
.content__welcome:nth-child(5) {
  grid-column: span 2;
  grid-row: 2;
}