@import "./../../common/base.css";

.grid-box {
    min-inline-size: 1122px;
    padding-inline: 20px;
    border: 1px solid green;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
        "item1 item1 item1 item2 item2"
        "item3 item3 item4 item4 item4"
        "item5 item5 item5 item5 item5";

    .grid-item {
        padding: 0.5rem;
    }

    .grid-item1 {
        background-color: yellow;
        grid-area: item1;
    }
    .grid-item2 {
        background-color: lightgreen;
        grid-area: item2;
    }
    .grid-item3 {
        background-color: gold;
        grid-area: item3;
    }
    .grid-item4 {
        background-color: lightblue;
        grid-area: item4;
    }
    .grid-item5 {
        background-color: salmon;
        grid-area: item5;
    }
}

.grid-wrapper {
    min-inline-size: 1122px;
    padding-inline: 20px;
    border: 1px solid green;
    display: grid;
    /* grid-auto-flow: column; */
    grid-template-columns: [techit-start] 1fr [likelion-start] 1fr [euid-start] 1fr 1fr [likelion-end euid-end] 1fr [techit-end];
    grid-template-rows: repeat(5, 50px);
    gap: 20px;

    .grid-item {
        padding: 0.5rem;
    }

    .grid-item1 {
        background-color: yellow;
        grid-column: techit;
    }
    .grid-item2 {
        background-color: lightgreen;
        grid-column: likelion;
    }
    .grid-item3 {
        background-color: gold;
        grid-column: euid;
    }
    .grid-item4 {
        background-color: lightblue;
    }
    .grid-item5 {
        background-color: salmon;
    }
}

.grid-container {
    min-inline-size: 1122px;
    padding-inline: 20px;
    border: 1px solid green;
    display: grid;
    /* grid-auto-flow: column; */
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    grid-template-rows: repeat(5, 50px);
    gap: 20px;

    .grid-item {
        border: 1px solid red;
        padding: 0.5rem;
    }

    .grid-item1 {
        background-color: yellow;
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 4;
        grid-column-end: 2;
    }
    .grid-item2 {
        background-color: lightgreen;
        grid-row: 3/5;
        grid-column: 4/6;
    }
    .grid-item3 {
        background-color: gold;
        grid-row: span 2;
        grid-column: span 2;
    }
    .grid-item4 {
        background-color: lightblue;
        grid-row: 5;
        grid-column: 1 / -1;
    }
    .grid-item5 {
        background-color: salmon;
        grid-area: 3 / 2 / span 3 / span 2;
    }
}