Responsive Positioning

Fixed or absolute positioning often needs completely different values at different breakpoints.

/* Mobile-first approach with positioning */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -250px; /* Off-canvas by default */
    width: 250px;
    transition: left 0.3s ease;
}

.sidebar.open {
    left: 0; /* Slide in when open */
}

/* Desktop version */
@media (min-width: 992px) {
    .sidebar {
        position: static; /* Back to normal flow */
        width: 25%;
        float: left;
    }
    
    .main-content {
        width: 75%;
        float: left;
    }
}

Responsive Flexbox

Flexbox makes it easy to reorder and resize elements at different breakpoints.

/* Mobile-first approach with Flexbox */
.container {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
}

.sidebar {
    order: 1; /* Appears after main content on mobile */
}

.main-content {
    order: 0; /* Appears first on mobile */
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        flex-direction: row; /* Side by side on larger screens */
    }
    
    .sidebar {
        flex: 0 0 250px; /* Fixed width */
        order: 0; /* Restore original order */
    }
    
    .main-content {
        flex: 1; /* Take remaining space */
    }
}

Responsive Grid

CSS Grid provides powerful tools for responsive layouts, often requiring fewer media queries.

/* Basic responsive grid without media queries */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* More complex responsive grid */
.dashboard {
    display: grid;
    gap: 20px;
    
    /* Mobile: single column */
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
}

/* Tablet */
@media (min-width: 768px) {
    .dashboard {
        grid-template-columns: 3fr 1fr;
        grid-template-areas:
            "header header"
            "main sidebar"
            "footer footer";
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .dashboard {
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-areas:
            "header header header"
            "sidebar-left main sidebar-right"
            "footer footer footer";
    }
}

Using Container Queries

Container queries are a newer feature that allow you to style elements based on their container's size rather than the viewport.

/* Define a containment context */
.card-container {
    container-type: inline-size;
    container-name: card;
}

/* Style based on container width */
@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

@container card (max-width: 399px) {
    .card {
        display: flex;
        flex-direction: column;
    }
}

Note: Container queries are a newer feature and may not be supported in all browsers yet.