body {
    width: 90%;
    margin: 0 auto;
    font-family: Arial;
}
h1 {text-align: center;}

#nav, #footer {
    background-color: #efefef;
    padding: 10px;
    margin: 5px;
    text-align: center;
}

li {
    display: inline;
    padding: 5px;
}

/* grid style */
.grid-container {
    display: grid;
    margin: 1%;
    background-color: #efefef;
    
    /* justify-content: space-evenly; ngasih space kiri dan kanan */
    grid-template-columns: 30% auto 30%;
    grid-template-rows: 100px 300px auto ;
    /* grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer"
    ; */
    gap: 10px;
}

.grid-item {
    background-color: antiquewhite;
    border: 1px solid grey;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.item-6 {
    grid-row-start: 3;
    grid-row-end: 5;
}

.item-9 {
    grid-column-start: 2;
    grid-column-end: 4;
}