Как сделать 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 колонки не устроило?