My Vision for the Layout

I am striving to create a dynamic grid structure with three columns and two rows, where the third column spans both rows and features an image. This layout should adjust itself based on the device screen size:

Specifically, I would like the image to transition to the lower row on tablet devices, and all columns to stack in a single column on mobile devices.

Tablet View :

https://i.stack.imgur.com/54rty.png

Mobile View:

https://i.stack.imgur.com/8oXRu.png

What I Have Tried & Expectation

I have experimented with using grid-template-area to organize the grid elements and the minmax() function to achieve responsiveness, yet my grid does not adapt as desired even with the use of minmax(). Ideally, I aim to attain this layout without relying heavily on media queries.

The Roadblock

see : grid.layoutit

Understanding the Challenge

The issue seems to emerge when utilizing grid-area to dictate the placement and sizing of grid children. When combined with minmax(), if a child's width decreases below 300px, it fails to wrap upon window resizing. The conflict arises because grid-area sets fixed positions for children within the grid structure. For example, the first child

.services .service1 { grid-area: 1 / 1; }

is positioned in the first row and column.

When the first child service1 becomes less than 300px due to minmax(300px, 1fr), it should ideally wrap to the second row and column 1, which contradicts the decision established by grid-area.

Hence, how can I arrange all my grid children accurately while ensuring responsive design? It appears challenging to achieve this when combining minmax() and grid-area.

Code Sample

<div class="services container">

            <div class="service1">
                    <i class="fa-solid fa-palette fa-2x">
                    </i>
                    <h4>
                        Graphic Design
                    </h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet
                    expedita numquam pariatur tempora, praesentium laudantium ad, porro reprehenderit repellat aut
                    perspiciatis, unde optio odio ab.</p>

            </div>
            <div class="service2">
                        <i class="fa-solid fa-gem fa-2x">
                        </i>
                                    <h4>
                        Web Design
                                    </h4>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente harum a illo voluptatum facere
                    repudiandae 
                    voluntates optio deleniti tenetur vel accusantium sequi minima, odio minus eius veritatis obcaecati. Natus,
                     similique?</p>
            </div>
            <div class="service3">
                    <i class="fa-solid fa-pen-ruler fa-2x"></i>
                    <h4>
                        UI and UX
                    </h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis culpa minima hic est laborum
                    necessitatibus rerum quidem, commodi quas iusto. Odio fuga cum perspiciatis delectus fugit quisquam
                    voluptate quos rem.</p>
            </div>
            <div class="service4">

                    <i class="fa-solid fa-code fa-2x"></i>
                    <h4>
                        Web Development
                    </h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, consequatur reiciendis officia
                    pariatur culpa nam tempore, dolores rem nesciunt nobis, exercitationem dolorum. Culpa, commodi facere?
                    Nihil fugit id expedita laborum.</p>
            </div>

            <div class="image"><img src="assets/images/services.jpg" alt="services"></div>

        </div>
    

.services {
        display: grid;
        grid-template-areas:
            '. card1 card2 image . '
            '. card3 card4 image . ';
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        row-gap: 2rem;
        align-content: center;
        padding-block: 5rem;
    }

    .services .service1 {
        grid-area: card1;
    }

    .services .service3 {
        grid-area: card2;
    }

    .services .service2 {
        grid-area: card3;
    }

    .services .service4 {
        grid-area: card4;
    }

    .services .image {
        position: relative;
        grid-area: image;
        width: 100%;
        max-width: 800px;
        display: block;
        margin: auto;
        height: auto;
        object-fit: cover;
    }

    .services .image::before {
        content: "";
        position: absolute;
        display: inline-block;
        background-color: #292a2f;
        border: #10cab7 2px solid;
        top: -11%;
        left: 65%;
        width: 167px;
        height: 585px;
        z-index: -1;
    }

    /* grid children are also displayed with grid */
    .services>div {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 50px max-content;
        align-items: start;
    }