Responsive Design – Introduction

Introduction to Responsive Design

Responsive web design ensures that your website looks great on any device—desktop, tablet, or phone—by adapting its layout and content to the screen size.

Resize the Browser

Below is a simple layout that changes as you adjust the viewport width.

Box 1

Box 2

Box 3

Box 4

Key Concepts

Fluid grids using fr units or percentages.
Flexible images that scale with their containers.
Media queries to apply styles at specific breakpoints.

Basic Media Query Example

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

This rule stacks all grid items in a single column on screens narrower than 600 px.