Card One
This image scales using width: 100% and height: auto.
Card Two
The layout changes using a media query.
Card Three
Try resizing the browser to see responsiveness.
This page demonstrates CSS Grid, Flexbox, Media Queries, and Responsive Images.
The cards below use CSS Grid. On large screens they appear in three columns. When you resize the screen below 768px, they stack into one column.
This image scales using width: 100% and height: auto.
The layout changes using a media query.
Try resizing the browser to see responsiveness.
The navigation bar uses Flexbox. It displays horizontally on larger screens and stacks vertically on smaller screens.
The media query at 768px changes both the grid layout and navigation layout. This demonstrates how responsive design adapts to different device sizes.