Multi-Directional Layout with CSS Grid and Implicit Grid Flow

/* HTML Structure for context:
<div class="grid-layout">
    <div class="grid-cell header">Header</div>
    <div class="grid-cell sidebar">Sidebar</div>
    <div class="grid-cell main-content">Main Content Area that can be very long.</div>
    <div class="grid-cell footer">Footer</div>
    <div class="grid-cell ad-slot">Ad</div>
    <div class="grid-cell extra-item">Extra 1</div>
    <div class="grid-cell extra-item">Extra 2</div>
    <div class="grid-cell extra-item">Extra 3</div>
</div>
*/

.grid-layout {
    display: grid;
    grid-template-columns: 200px 1fr 150px; /* Sidebar | Main Content | Ad Slot */
    grid-template-rows: auto 1fr auto; /* Header | Content | Footer */
    grid-auto-flow: dense; /* Optimize filling for implicitly placed items */
    height: 100vh; /* For demonstration, make it full viewport height */
    gap: 15px;
    background-color: #f4f4f4;
    padding: 15px;
}

.grid-cell {
    background-color: #aad6ff;
    border: 1px solid #7cb7ed;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #333;
}

/* Explicit Placement */
.header {
    grid-column: 1 / -1; /* Spans all columns */
    background-color: #5d9cec;
    color: white;
}

.sidebar {
    grid-column: 1;
    grid-row: 2;
    background-color: #e6f2ff;
}

.main-content {
    grid-column: 2;
    grid-row: 2;
    background-color: #fff;
    overflow-y: auto; /* Allow main content to scroll */
}

.ad-slot {
    grid-column: 3;
    grid-row: 2;
    background-color: #ffd8a8;
}

.footer {
    grid-column: 1 / -1; /* Spans all columns */
    grid-row: 3;
    background-color: #5d9cec;
    color: white;
}

/* Implicitly placed items will flow into available spaces,
   `dense` helps fill gaps. */
.extra-item {
    background-color: #c9e2f9;
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr; /* Single column layout */
        grid-template-rows: auto auto 1fr auto auto; /* Header, Sidebar, Main, Ad, Footer */
        height: auto; /* No longer force full height */
    }
    .header, .footer {
        grid-column: 1;
    }
    .sidebar {
        grid-column: 1;
        grid-row: 2;
    }
    .main-content {
        grid-column: 1;
        grid-row: 3;
    }
    .ad-slot {
        grid-column: 1;
        grid-row: 4;
    }
    .footer {
        grid-row: 5;
    }
}