SASSmarkup~30 mins

Responsive grid with breakpoints in SASS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Responsive Grid with Breakpoints using Sass

📖 Scenario: You are building a simple responsive grid layout for a website. The grid should show items in one column on small screens, two columns on medium screens, and four columns on large screens.

🎯 Goal: Create a responsive grid using Sass variables and media queries. The grid items should adjust their width based on screen size breakpoints.

📋 What You'll Learn

Use Sass variables for breakpoints

Create a grid container with flexbox

Define grid item widths for small, medium, and large screens

Use media queries with the Sass variables

Ensure the grid is responsive and accessible

💡 Why This Matters

🌍 Real World

Responsive grids are used on almost every modern website to display content neatly on all devices, from phones to desktops.

💼 Career

Knowing how to create responsive layouts with Sass and media queries is a key skill for front-end developers and web designers.

Progress0 / 4 steps

Set up the HTML structure

Create a div with class grid containing exactly four child div elements with class grid-item. Each grid-item should have text content: Item 1, Item 2, Item 3, and Item 4 respectively.

SASS

Need a hint?

Use a div with class grid as the container. Inside it, add four div elements with class grid-item and the exact text content.

Define Sass variables for breakpoints

In your Sass file, create three variables: $small-screen set to 480px, $medium-screen set to 768px, and $large-screen set to 1024px.

SASS

$small-screen: 480px;
$medium-screen: 768px;
$large-screen: 1024px;

// Your code here

Need a hint?

Use the Sass variable syntax: $variable-name: value; for each breakpoint.

Create the responsive grid styles

Write Sass code to style the .grid container with display: flex and flex-wrap: wrap. Then style .grid-item to have width: 100% by default. Add media queries using $medium-screen and $large-screen to set .grid-item width to 50% at medium screens and 25% at large screens.

SASS

$small-screen: 480px;
$medium-screen: 768px;
$large-screen: 1024px;

.grid {
  // Your code here
}

.grid-item {
  // Your code here
}

@media (min-width: $medium-screen) {
  .grid-item {
    // Your code here
  }
}

@media (min-width: $large-screen) {
  .grid-item {
    // Your code here
  }
}

Need a hint?

Use flexbox on .grid and set width on .grid-item inside media queries with the breakpoint variables.

Add accessibility and responsive meta tag

Add a <meta> tag inside the <head> of your HTML with name="viewport" and content="width=device-width, initial-scale=1.0". Also add aria-label="Responsive grid container" to the div with class grid.

SASS


  



  Item 1
  Item 2
  Item 3
  Item 4

Need a hint?

The viewport meta tag helps the page scale on different devices. The aria-label improves accessibility by describing the grid container.