SCSS Responsive Design Patterns

Learn common responsive design patterns and how to implement them efficiently using SCSS.

Responsive Grid System

Create a flexible grid system that adapts to different screen sizes.

// SCSS
$grid-columns: 12;
$grid-gaps: (
    "small": 1rem,
    "medium": 1.5rem,
    "large": 2rem
);
$breakpoints: (
    "sm": 576px,
    "md": 768px,
    "lg": 992px
);

.grid {
    display: grid;
    gap: map-get($grid-gaps, "small");
    
    @media (min-width: map-get($breakpoints, "md")) {
        gap: map-get($grid-gaps, "medium");
    }
    
    // Generate column classes
    @for $i from 1 through $grid-columns {
        .col-#{$i} {
            grid-column: span $i;
        }
        
        @each $breakpoint, $value in $breakpoints {
            @media (min-width: $value) {
                .col-#{$breakpoint}-#{$i} {
                    grid-column: span $i;
                }
            }
        }
    }
    
    // Responsive grid templates
    grid-template-columns: repeat($grid-columns, 1fr);
    
    &.grid-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

Usage Example:

<div class="grid">
    <div class="col-12 col-md-6 col-lg-4">Item 1</div>
    <div class="col-12 col-md-6 col-lg-4">Item 2</div>
    <div class="col-12 col-md-12 col-lg-4">Item 3</div>
</div>

Fluid Typography

Create responsive typography that scales smoothly across different screen sizes.

// SCSS
@function fluid-size($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
    $slope: ($max-size - $min-size) / ($max-width - $min-width);
    $base: $min-size - ($slope * $min-width);
    
    @return clamp(
        #{$min-size}px,
        #{$base + $slope * 100}vw,
        #{$max-size}px
    );
}

:root {
    --fluid-h1: #{fluid-size(28, 48)};
    --fluid-h2: #{fluid-size(24, 40)};
    --fluid-body: #{fluid-size(16, 18)};
}

h1 {
    font-size: var(--fluid-h1);
    line-height: 1.2;
}

h2 {
    font-size: var(--fluid-h2);
    line-height: 1.3;
}

p {
    font-size: var(--fluid-body);
    line-height: 1.5;
}

Responsive Navigation Patterns

Common navigation patterns that adapt to different screen sizes.

// SCSS
.nav {
    $breakpoint: 768px;
    
    &__list {
        display: flex;
        flex-direction: column;
        
        @media (min-width: $breakpoint) {
            flex-direction: row;
            justify-content: space-between;
        }
    }
    
    &__menu-button {
        display: block;
        
        @media (min-width: $breakpoint) {
            display: none;
        }
    }
    
    &__items {
        display: none;
        
        &.active {
            display: flex;
            flex-direction: column;
        }
        
        @media (min-width: $breakpoint) {
            display: flex;
            flex-direction: row;
        }
    }
    
    // Dropdown pattern
    &__dropdown {
        position: relative;
        
        &-content {
            @media (min-width: $breakpoint) {
                position: absolute;
                top: 100%;
                display: none;
                
                .nav__dropdown:hover & {
                    display: block;
                }
            }
        }
    }
}

Responsive Images and Media

Handle images and media content responsively.

// SCSS
@mixin aspect-ratio($width, $height) {
    position: relative;
    
    &::before {
        content: "";
        display: block;
        padding-top: ($height / $width) * 100%;
    }
    
    > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.responsive-image {
    width: 100%;
    height: auto;
    
    &--container {
        @include aspect-ratio(16, 9);
        
        @media (min-width: 768px) {
            @include aspect-ratio(21, 9);
        }
    }
    
    &--gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

Responsive Layout Patterns

Common layout patterns that work across different screen sizes.

// SCSS
// Holy Grail Layout
.holy-grail {
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "sidebar"
        "footer";
    
    @media (min-width: 768px) {
        grid-template-areas:
            "header header header"
            "nav main sidebar"
            "footer footer footer";
        grid-template-columns: 200px 1fr 200px;
    }
    
    &__header { grid-area: header; }
    &__nav { grid-area: nav; }
    &__main { grid-area: main; }
    &__sidebar { grid-area: sidebar; }
    &__footer { grid-area: footer; }
}

// Card Layout
.card-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        
        &__image {
            @include aspect-ratio(16, 9);
        }
        
        &__content {
            flex: 1;
            padding: 1rem;
        }
    }
}

Best Practices

Start with mobile-first approach
Use relative units (rem, em, %) over fixed units
Implement fluid typography for better readability
Create reusable mixins for common responsive patterns
Test layouts across different devices and orientations
Use modern CSS Grid and Flexbox for layouts
Consider performance when implementing responsive images
Keep breakpoints consistent throughout the project