Why Responsive grid with breakpoints in SASS? - Purpose & Use Cases

The Big Idea

Discover how a few lines of code can make your website look perfect on any device without endless tweaking!

The Scenario

Imagine you are building a photo gallery page. You want the photos to line up nicely in rows on a big screen, but on a phone, they should stack in a single column so they are easy to see.

The Problem

If you try to set fixed widths for each photo manually, the layout breaks on different screen sizes. You have to write separate styles for every device size and adjust widths by hand, which is slow and confusing.

The Solution

Responsive grids with breakpoints let you define how many columns to show at different screen widths. The grid automatically adjusts, so your photos look great on phones, tablets, and desktops without rewriting styles for each device.

Before vs After

✗ Before

.photo { width: 200px; float: left; margin: 10px; }
@media (max-width: 600px) { .photo { width: 100%; float: none; } }

✓ After

@use 'sass:map';
$breakpoints: (small: 600px, medium: 900px);
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  @media (max-width: map.get($breakpoints, medium)) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: map.get($breakpoints, small)) {
    grid-template-columns: 1fr;
  }
}

What It Enables

You can create layouts that smoothly change to fit any screen size, making your site look professional and easy to use everywhere.

Real Life Example

Online stores use responsive grids to show product cards in multiple columns on desktop but stack them vertically on mobile phones for easy browsing.

Key Takeaways

Manual fixed widths break layouts on different devices.

Responsive grids with breakpoints adjust columns automatically.

This makes your site look good and work well on all screen sizes.