Responsive grid with breakpoints in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a breakpoint in responsive web design?

A breakpoint is a specific screen width where the layout changes to better fit the device, like switching from a single column on phones to multiple columns on desktops.

beginner

How does a grid system help in responsive design?

A grid system divides the page into columns and rows, making it easier to arrange content that adjusts smoothly across different screen sizes.

intermediate

In Sass, how do you define a breakpoint for screens wider than 768px?

You use a media query like:

@media (min-width: 769px) { /* styles here */ }

This applies styles only when the screen is at least 769 pixels wide.

intermediate

What Sass feature helps you avoid repeating media query code for multiple breakpoints?

Using mixins lets you write reusable media query blocks. For example, you can create a mixin for a breakpoint and include it wherever needed.

beginner

Why use relative units like rem or % in a responsive grid?

Relative units scale better on different devices and respect user settings, making layouts more flexible and accessible.

What does a media query with min-width: 600px do?

A Applies styles only when the screen is at least 600px wide

B Applies styles only when the screen is smaller than 600px

C Applies styles on all screen sizes

D Disables styles on screens wider than 600px

A media query with min-width applies styles when the screen width is equal to or greater than the specified value.

Which Sass feature helps reuse code for different breakpoints?

A Variables

B Mixins

C Functions

D Placeholders

Mixins let you write reusable blocks of code, such as media queries for breakpoints.

In a responsive grid, what unit is best for flexible column widths?

A Pixels (px)

B Rem

C Percent (%)

D Points (pt)

Percent units allow columns to adjust their width relative to the container, making the grid flexible.

What is the main purpose of breakpoints in a grid layout?

A To change layout based on screen size

B To add colors

C To increase font size only

D To hide all content

Breakpoints let the layout adapt to different screen sizes for better usability.

Which CSS property is commonly used to create a grid layout?

A display: flex

B display: block

C display: inline

D display: grid

display: grid creates a grid container that helps arrange items in rows and columns.

Explain how you would create a responsive grid using Sass with breakpoints.

Think about how to write media queries in Sass and how to make columns flexible.

Describe why breakpoints are important in responsive web design and how they affect grid layouts.

Consider how websites look on small vs large screens.