Fluid Images and Media Queries
What you should see: The cherry blossom image below is "fluid." If you make your browser window smaller, the image will automatically shrink so it never breaks out of the box. Additionally, a Media Query is active: if you shrink the screen below 600px, this section's padding gets smaller to save space on mobile phones.
CSS Grid Layout
What you should see:CSS Grid containing three text blocks. On a wide desktop screen, they will sit side by side in columns. If browser is resized to simulate a mobile phone, the grid will automatically collapse, stacking the boxes vertically on top of each other.
Design
Responsive design prioritizes the user experience.
Structure
HTML provides the structure, CSS provides the adaptability.
Flexibility
Grids allow elements to reflow naturally.