One page, many screens
Responsive design means one page whose layout adapts to the screen showing it. The same HTML opens on a phone 360 CSS pixels wide and in a laptop window 1024 wide. Nothing adapts yet, so watch what goes wrong.
The viewport is the area a page is laid out in. Without help, a phone pretends to be a desktop: it lays the page out in a virtual viewport, often 980 pixels wide, then shrinks it into 360. Everything ends up tiny.
One tag in the HTML head fixes it: meta name="viewport" with content="width=device-width". It makes the viewport as wide as the phone's own screen, 360 CSS pixels, so the page is laid out for the phone at full size.
Mobile first
Write the small-screen layout first; this is called mobile first. The rule .page { display: grid; gap: 16px; } makes a grid with one column: main and aside stack, each as wide as the page, 16px apart. Both screens use it.
Media queries
A media query wraps rules in a condition about the screen. @media (min-width: 700px) means: use the rules inside only while the viewport is at least 700 pixels wide. The browser checks it and gets yes or no.
On the phone the viewport is 360 pixels wide. Is 360 at least 700? No. So the browser skips the rules inside the media query, and the phone keeps its single column.
In the laptop window the viewport is 1024 pixels wide. Is 1024 at least 700? Yes. So for this window the rules inside the media query count too.
Inside, .page gets grid-template-columns: 2fr 1fr. An fr is one share of the free space: main gets two shares, aside one. The page is 1008px wide, so after the 16px gap main is about 661 and aside 331.
Resizing
Drag the laptop window narrower and the browser checks the query again, live, with no reload. The moment the width drops below 700 the answer turns to no, the two-column rule stops applying and the layout goes back to one column.
A width where the layout changes is called a breakpoint. min-width means at least, so at exactly 700 pixels the answer is yes and the two columns return. Pick breakpoints where your content needs them, not one per device.
What happens
;; step 1/10 · one-page one HTML file, two screens phone 360 CSS px wide laptop window 1024 CSS px wide no viewport tag, no CSS yet: main and aside stack, no gap between them
A real browser checks the media query and applies every rule at once, while it works out the style of each element. The figure goes one step at a time so you can see each part. Here the content of each box has a fixed height (main 200px, aside 120px) so the picture stays simple; real text gets taller as its box gets narrower. In two columns, grid items stretch to the height of their row, so aside grows to 200px.