Responsive Grid Example

Responsive Grid Example

Let us combine everything from this series to build a complete, responsive page layout that adapts seamlessly from mobile to desktop — using grid areas, auto-fit, and media queries.

The HTML Structure

<div class="page">
    <header class="page-header">
        <h1>My Website</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <aside class="sidebar">
        <h3>Categories</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </aside>
    <main class="content">
        <div class="card-grid">
            <div class="card">Card 1</div>
            <div class="card">Card 2</div>
            <div class="card">Card 3</div>
            <div class="card">Card 4</div>
            <div class="card">Card 5</div>
            <div class="card">Card 6</div>
        </div>
    </main>
    <footer class="page-footer">Footer Content</footer>
</div>

The Page-Level Grid

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    min-height: 100vh;
    gap: 20px;
}

.page-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
.content     { grid-area: content; }
.page-footer { grid-area: footer; }

The Nested Card Grid

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Responsive Breakpoints

/* Tablet */
@media (max-width: 900px) {
    .page {
        grid-template-columns: 200px 1fr;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
    }
}

On mobile, the layout switches to a single column. The sidebar moves below the content (just by redefining the grid areas). The nested card grid uses auto-fit so cards automatically adjust their layout without any media query.

Series Summary

You have now mastered CSS Grid Layout. Here is what you have learned:

Concept	Key Property
Columns	grid-template-columns, repeat(), fr
Rows	grid-template-rows, grid-auto-rows
Placement	grid-column, grid-row, span
Named Areas	grid-template-areas, grid-area
Alignment	justify-items, align-items, place-items
Responsive	auto-fit, minmax(), media queries

Key Takeaways

• Use grid-template-areas for the page layout — readable and easy to change
• Nest grids for content sections — auto-fit + minmax() for automatic responsiveness
• Redefine grid-template-areas in media queries for different screen layouts
• CSS Grid + a few media queries replaces entire CSS frameworks