Grid vs Stacked Layout Example

Grid vs Stacked Layout Example

One of Flexbox's superpowers is switching between horizontal grid and vertical stacked layouts. By changing flex-direction and flex-wrap with a media query, you can build fully responsive layouts.

The HTML

<div class="layout">
    <div class="sidebar">
        <h3>Sidebar</h3>
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </div>
    <main class="content">
        <h2>Main Content</h2>
        <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>
</div>

Desktop: Side-by-Side Layout

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 260px;      /* Fixed 260px, no grow, no shrink */
    background: #2c3e50;
    color: white;
    padding: 30px 20px;
}

.sidebar h3 {
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
}

.sidebar ul {
    list-style: none;
}

.sidebar ul li a {
    display: block;
    padding: 10px 14px;
    color: #bbb;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar ul li a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.content {
    flex: 1;              /* Fill remaining space */
    padding: 30px;
    background: #f5f7fa;
}

Card Grid Inside Content

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.card {
    flex: 1 1 200px;  /* Responsive cards */
    background: white;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-weight: 600;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

Mobile: Stacked Layout

@media (max-width: 768px) {
    .layout {
        flex-direction: column;  /* Stack vertically */
    }

    .sidebar {
        flex: none;              /* Remove flex sizing */
        width: 100%;             /* Full width */
        padding: 20px;
    }

    .sidebar ul {
        display: flex;           /* Horizontal scrolling menu */
        gap: 8px;
        overflow-x: auto;
    }

    .sidebar ul li a {
        white-space: nowrap;
        padding: 8px 16px;
        background: rgba(255,255,255,0.1);
        border-radius: 20px;
        font-size: 13px;
    }

    .content {
        padding: 20px;
    }

    .card {
        flex: 1 1 100%;  /* Full width cards, stacked */
    }
}

What Changes on Mobile

Property	Desktop	Mobile
flex-direction	row (side-by-side)	column (stacked)
Sidebar width	260px fixed	100% full width
Sidebar nav	Vertical list	Horizontal scroll
Card grid	Multiple per row	1 per row

The Power of flex-direction

Changing flex-direction from row to column instantly transforms a side-by-side layout into a stacked layout. Combined with adjusting flex-basis, you get a complete responsive transformation with minimal code.

Key Takeaways

• Switching flex-direction: row → column converts side-by-side to stacked
• Use flex: 0 0 260px for fixed-width sidebars, flex: 1 for fluid content
• Nested flex containers (card grid inside content) are perfectly valid
• On mobile, the sidebar becomes a horizontal scrolling nav with overflow-x: auto
• Flexbox + one media query replaces complex responsive frameworks