* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    margin: 40px;
    border: 2px solid red;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: 200px 200px; */
    grid-auto-rows: 100px;
    justify-content: space-between;
    gap: 20px;
}

.box {
    border: 2px solid rgb(8, 0, 255);;
    background-color: rgb(178, 176, 255);
    padding: 20px;
}

#box-1 {
    /* grid-column-start: 1;
    grid-column-end: -1; */
    grid-column: 1 / -1;
}

#box-2 {
    /* grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 2;
    grid-row-end: span 2; */
    grid-area: 2 / 1 / span 2 / span 2;
}

#box-3 {
    grid-row: span 3;
}

#box-6 {
    grid-area: 4 / 1 / 7 / 3;
}

#box-11 {
    width: 40px;
    height: 20px;
    justify-self: end;
    align-self: flex-end;
}

.parent {
    width: 400px;
    height: 400px;
    border: 2px solid red;
    display:  grid;
    /* justify-content: center;
    align-content: center; */
}

.child {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    justify-self: center;
    align-self: center;
}