3 replies

Help with grid

Hello. Really sorry to ask a beginner question here, but I just recently started learning grid and im not sure why this isn't showing the desired result.

Code:

 &__image-layout {
        display: grid;
        grid-template-areas:
            "room1 room2"
            "room1 room3";

        gap: 1rem;
    }

    &__image {
        --left {
            grid-area: room1;
            height: 100%;
        }

        &--top-right {
            grid-area: room2;
            height: 100%;
        }
        &--bottom-right {
            grid-area: room3;
            height: 100%;
        }
    }

 &__image-layout {
        display: grid;
        grid-template-areas:
            "room1 room2"
            "room1 room3";

        gap: 1rem;
    }

    &__image {
        --left {
            grid-area: room1;
            height: 100%;
        }

        &--top-right {
            grid-area: room2;
            height: 100%;
        }
        &--bottom-right {
            grid-area: room3;
            height: 100%;
        }
    }

 &__image-layout {
        display: grid;
        grid-template-areas:
            "room1 room2"
            "room1 room3";

        gap: 1rem;
    }

    &__image {
        --left {
            grid-area: room1;
            height: 100%;
        }

        &--top-right {
            grid-area: room2;
            height: 100%;
        }
        &--bottom-right {
            grid-area: room3;
            height: 100%;
        }
    }

 &__image-layout {
        display: grid;
        grid-template-areas:
            "room1 room2"
            "room1 room3";

        gap: 1rem;
    }

    &__image {
        --left {
            grid-area: room1;
            height: 100%;
        }

        &--top-right {
            grid-area: room2;
            height: 100%;
        }
        &--bottom-right {
            grid-area: room3;
            height: 100%;
        }
    }

Desirable outcome:

Help with grid

Similar Threads

Similar Threads

Similar Threads