0
0
SASSmarkup~5 mins

Responsive grid with breakpoints in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A responsive grid helps your website look good on all screen sizes by adjusting layout automatically.

You want your website to work well on phones, tablets, and desktops.
You need columns that stack on small screens but sit side-by-side on large screens.
You want to control how many items fit in a row depending on screen width.
You want to avoid horizontal scrolling on small devices.
You want a flexible layout that adapts without writing separate code for each device.
Syntax
SASS
@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 599px) { @content; }
  } @else if $point == medium {
    @media (min-width: 600px) and (max-width: 899px) { @content; }
  } @else if $point == large {
    @media (min-width: 900px) { @content; }
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  @include breakpoint(medium) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include breakpoint(large) {
    grid-template-columns: repeat(4, 1fr);
  }
}

The @mixin breakpoint defines screen size rules.

Use @include breakpoint(name) to apply styles inside that screen size.

Examples
Defines a small screen breakpoint for screens up to 599px wide.
SASS
@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 599px) { @content; }
  }
}
Starts with 1 column on small screens, changes to 2 columns on medium screens.
SASS
.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  @include breakpoint(medium) {
    grid-template-columns: repeat(2, 1fr);
  }
}
Adds 4 columns on large screens for more content side-by-side.
SASS
.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  @include breakpoint(medium) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include breakpoint(large) {
    grid-template-columns: repeat(4, 1fr);
  }
}
Sample Program

This example creates a grid with 1 column on small screens, 2 columns on medium screens, and 4 columns on large screens. Each grid item is a blue box with white text. The layout changes automatically when you resize the browser.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Grid Example</title>
  <style lang="scss">
    $breakpoints: (
      small: 599px,
      medium: 899px
    );

    @mixin breakpoint($point) {
      @if $point == small {
        @media (max-width: map-get($breakpoints, small)) {
          @content;
        }
      } @else if $point == medium {
        @media (min-width: #{map-get($breakpoints, small) + 1px}) and (max-width: map-get($breakpoints, medium)) {
          @content;
        }
      } @else if $point == large {
        @media (min-width: #{map-get($breakpoints, medium) + 1px}) {
          @content;
        }
      }
    }

    .grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(1, 1fr);
      padding: 1rem;
    
      @include breakpoint(medium) {
        grid-template-columns: repeat(2, 1fr);
      }
    
      @include breakpoint(large) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .item {
      background-color: #4a90e2;
      color: white;
      padding: 1rem;
      border-radius: 0.5rem;
      text-align: center;
      font-weight: bold;
      font-size: 1.25rem;
    }
  </style>
</head>
<body>
  <main>
    <section class="grid" aria-label="Responsive grid example">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use gap in grid to add space between items instead of margins.

Always test your grid by resizing the browser or using device simulation in browser DevTools.

Use semantic HTML and ARIA labels for accessibility, like aria-label on the grid container.

Summary

A responsive grid adjusts columns based on screen size using breakpoints.

Use Sass mixins to write clean, reusable media queries for breakpoints.

Test responsiveness by resizing your browser or using DevTools device mode.