.layout {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header header"
        "sidebar content aaaa"
        "footer  footer footer";
    min-height: 90vh;
    gap: 16px;
    padding: 16px;
}

.header {
    grid-area: header;
    border: 1px solid #ccc;
    padding: 12px;
}

#main-nav {
    display: flex;
    justify-content: space-between;
}

.sidebar {
    grid-area: sidebar;
    border: 1px solid #ccc;
    padding: 12px;
    background-color: rgb(3, 18, 68);
}

.content {
    grid-area: content;
    border: 1px solid #ccc;
    padding: 12px;
    background: linear-gradient();
}
.aaaa{
    grid-area: aaaa;
    border: 1px solid #ccc;
    padding: 12px;
}
.footer {
    grid-area: footer;
    border: 1px solid #ccc;
    padding: 12px;
    background-color: antiquewhite;
}
.items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: aqua;
}
.item{
    padding: 8px;
    border: 1px solid #ccc;
    background-color: tomato;
    height: 100px;
    width: 100px;
    transition: 0.5s;
}
.item:hover{
    background-color: red;
    color: white;
    transition: 0.1s;
    transform: scale(1.1);
}