#ex1 {
    .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex2 {
    .container {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex3 {
    .container {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 20px;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex4 {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex5 {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px;
        gap: 20px;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex6 {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(50px, auto);
        gap: 20px;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex7 {
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        grid-auto-rows: minmax(50px, auto);
        gap: 20px;
    }

    .container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207 232 220);
        border: 2px solid rgb(79 185 227);
    }
}

#ex8 {
    .container {
        font-family: sans-serif;
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }

    header,
    footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rebeccapurple;
        color: whitesmoke;
        text-align: center;
    }

    aside {
        border-right: 1px solid rebeccapurple;
    }

}

#ex9 {
    .container {
        font-family: sans-serif;
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }

    header,
    footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rebeccapurple;
        color: whitesmoke;
        text-align: center;
    }

    aside {
        border-right: 1px solid rebeccapurple;
    }

    header {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    main {
        grid-column: 2;
        grid-row: 2;
    }

    aside {
        grid-column: 1;
        grid-row: 2;
    }

    footer {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

#ex10 {
    .container {
        font-family: sans-serif;
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar content"
            "footer footer";
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }

    header,
    footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rebeccapurple;
        color: whitesmoke;
        text-align: center;
    }

    aside {
        border-right: 1px solid rebeccapurple;
    }

    header {
        grid-area: header;
    }

    main {
        grid-area: content;
    }

    aside {
        grid-area: sidebar;
    }

    footer {
        grid-area: footer;
    }

}

#ex11 {
    .container {
        font-family: sans-serif;
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar content"
            "footer footer";
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }

    header,
    footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rebeccapurple;
        color: whitesmoke;
        text-align: center;
    }

    aside {
        border-right: 1px solid rebeccapurple;
    }

    header {
        grid-area: header;
    }

    main {
        grid-area: content;
        display: grid;
        grid-template-rows: 4fr 3fr 3fr;
        gap: inherit;
    }

    article {
        padding: 10px;
        border: 2px solid rebeccapurple;
        border-radius: 5px;
    }

    aside {
        grid-area: sidebar;
    }

    footer {
        grid-area: footer;
    }

}