CSS Grid: Responsive Layout with Explicit Grid Template Changes

.grid-container {
    display: grid;
    gap: 15px;
    padding: 15px;
    background-color: #f0f0f0;
    min-height: 100vh;
    box-sizing: border-box;

    /* Default layout for larger screens (e.g., desktop) */
    grid-template-columns: 250px 1fr 1fr; /* Sidebar, Main, Secondary */
    grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
    grid-template-areas:
        "header header header"
        "sidebar main secondary"
        "footer footer footer";
}

.header { grid-area: header; background-color: #6a1b9a; color: white; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #efefef; padding: 20px; }
.main { grid-area: main; background-color: #fff; padding: 20px; }
.secondary { grid-area: secondary; background-color: #e0e0e0; padding: 20px; }
.footer { grid-area: footer; background-color: #4a148c; color: white; padding: 20px; text-align: center; }

/* Mobile layout: Single column */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: auto auto 1fr auto auto; /* Header, Sidebar, Main, Secondary, Footer */
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "secondary"
            "footer";
    }
}

/* Tablet layout: Two columns */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr 1fr; /* Two columns */
        grid-template-rows: auto 1fr auto auto; /* Header, Main/Secondary, Sidebar, Footer */
        grid-template-areas:
            "header header"
            "main secondary"
            "sidebar sidebar"
            "footer footer";
    }
}

body { margin: 0; font-family: sans-serif; }
h2 { margin-top: 0; }
/* HTML Structure */
/*
<div class="grid-container">
    <header class="header">
        <h2>Website Header</h2>
    </header>
    <aside class="sidebar">
        <h2>Sidebar</h2>
        <p>Navigation links or secondary content.</p>
    </aside>
    <main class="main">
        <h2>Main Content Area</h2>
        <p>This is the primary content of the page, adapting its position based on screen size.</p>
    </main>
    <div class="secondary">
        <h2>Secondary Content</h2>
        <p>Additional information or widgets.</p>
    </div>
    <footer class="footer">
        <p>&copy; 2023 Responsive Layout</p>
    </footer>
</div>
*/