.grid-cards {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;
}

.card {
    background: #f4f4f4;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
}

.page-layout {
    display: grid;
    height: 100vh;


    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;


    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";

    gap: 10px;
}

.header {
    grid-area: header;
    background: #333;
    color: white;
}

.sidebar {
    grid-area: sidebar;
    background: #f4f4f4;
}

.main {
    grid-area: main;
    background: #fff;
}

.footer {
    grid-area: footer;
    background: #333;
    color: white;
}