📱 Responsive Grid

Media queries with CSS Grid — explicit control at breakpoints
1. Changing Number of Columns
Mobile (1 column) → Tablet (2 columns) → Desktop (3 columns) → Large (4 columns)
Resize your browser to see the grid change at specific breakpoints!
1
Mobile: 1 col
Tablet: 2 cols
Desktop: 3 cols
2
Card 2
3
Card 3
4
Card 4
5
Card 5
6
Card 6
/* Default: 1 column (mobile) */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .responsive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .responsive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large: 4 columns */
@media (min-width: 1200px) {
    .responsive-grid { grid-template-columns: repeat(4, 1fr); }
}
2. Asymmetric Grid (Featured Item Spans)
The first card spans all columns on each breakpoint.
★
Featured Card
(spans all columns)
2
Card 2
3
Card 3
4
Card 4
5
Card 5
6
Card 6
7
Card 7
@media (min-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr 1fr;
    }
    .featured { grid-column: span 2; }
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .featured { grid-column: span 3; }
}
3. Best of Both (auto-fit + Media Query Limit)
auto-fit makes it flexible, but media query caps maximum columns.
1
Card 1
2
Card 2
3
Card 3
4
Card 4
5
Card 5
6
Card 6
7
Card 7
8
Card 8
/* Auto-fit for flexibility */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* But don't go beyond 4 columns */
@media (min-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
💡 This approach gives you the best of both: auto-fit for responsiveness + a limit so cards don't get too small on huge screens.
4. Dashboard That Rearranges Entirely
The layout completely changes at different breakpoints using grid-template-areas.
📊 DASHBOARD
📈 Users
1,234
💰 Revenue
$12,345
📉 Sales
+23%
📊 CHART 1
📈 CHART 2
📋 DATA TABLE
/* Mobile: 1 column stacked */
.dashboard {
    display: grid;
    grid-template-areas:
        "header"
        "stats"
        "chart1"
        "chart2"
        "table";
    gap: 20px;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .dashboard {
        grid-template-areas:
            "header header"
            "stats stats"
            "chart1 chart2"
            "table table";
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop: advanced layout */
@media (min-width: 1024px) {
    .dashboard {
        grid-template-areas:
            "header header header"
            "stats stats stats"
            "chart1 chart2 table"
            "chart1 chart2 table";
        grid-template-columns: 1fr 1fr 1fr;
    }
}
📚 Media Query Breakpoints Reference
/* =================================== COMMON BREAKPOINTS =================================== */ /* Mobile: 320px - 480px */ /* Tablet: 768px - 1024px */ /* Desktop: 1024px - 1200px */ /* Large Desktop: 1200px+ */ /* =================================== MOBILE FIRST (min-width) =================================== */ /* Default: mobile styles */ .element { } @media (min-width: 768px) { .element { } } /* Tablet+ */ @media (min-width: 1024px) { .element { } } /* Desktop+ */ @media (min-width: 1200px) { .element { } } /* Large+ */ /* =================================== DESKTOP FIRST (max-width) =================================== */ /* Default: desktop styles */ .element { } @media (max-width: 1024px) { .element { } } /* Tablet */ @media (max-width: 768px) { .element { } } /* Mobile */ /* =================================== RESPONSIVE GRID PATTERNS =================================== */ /* Pattern 1: Change column count */ @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } } /* Pattern 2: Change layout entirely */ @media (min-width: 768px) { .grid { grid-template-areas: "header header" "sidebar main" "footer footer"; } }
🧠 Quick Quiz
/* Question 1: When using mobile-first, what breakpoint do you start with? */ /* Answer: Mobile (no media query), then add min-width queries */ /* Question 2: How do you make a grid go from 1 column to 2 columns at 768px? */ /* Answer: @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } */ /* Question 3: What's the difference between auto-fit + minmax vs media queries? */ /* Answer: auto-fit is automatic, media queries give you explicit control */ /* Question 4: Can you combine auto-fit with media queries? */ /* Answer: Yes! Use auto-fit for flexibility, then cap with media query */ /* Question 5: What changes in the dashboard example at different breakpoints? */ /* Answer: The entire grid-template-areas layout changes */