A media query applies CSS rules only when its condition is met. It begins with `@media`, followed by a condition and a block of rules. For example, `@media (min-width: 955px) { ... }` applies its rules when the viewport is at least 955 pixels wide. section 2.5
Give a wide layout more columns
Start with a layout that works on narrow screens. At 955 pixels, use `@media (min-width: 955px)` to change a Grid layout to three equal columns and rearrange its `grid-template-areas`. The rules outside the query still serve narrower screens. section 2.5
You can add breakpoints as the available space grows. A card grid changes to two columns at 700 pixels, then four at 950 pixels. At 950 pixels, both queries match: the later column rule replaces the earlier one, while the height set at 700 pixels remains. section 5.2.2
Listing 5.6 Layout for the cards
@media (min-width: 700px) { #1
main {
grid-template-columns: repeat(2, 1fr);
}
main > section {
height: 350px;
}
}
@media (min-width: 950px) { #2
main {
grid-template-columns: repeat(4, 1fr);
}
}
Compare the two `min-width` blocks to see how a later breakpoint changes the column count without repeating the card height. section 5.2.2
Make a table fit a phone
A wide checkout table needs another approach on a narrow screen. `@media (max-width: 549px) { td, tr { display: block; } }` begins turning its rows into stacked cards. At 550 pixels, those mobile-only rules stop applying and the standard table layout returns. A browser’s device toolbar helps preview the change, but does not replace testing on a physical device. section 8.3.1 section 8.4
Width is not the only possible condition. Join requirements with `and` when an effect needs several conditions at once. For interactive cards, `(hover: hover)`, `(min-width: 700px)`, and `(prefers-reduced-motion: no-preference)` restrict the animated reveal to suitable circumstances. Keep card information visible without the effect; within it, `:focus-within` can reveal content when a descendant receives focus. section 5.0 section 5.5
Listing 5.17 Showing content on hover and focus-within
@media (hover: hover) and (min-width: 700px) and
(prefers-reduced-motion: no-preference) {
main > section > div {
transform: translateY(calc(350px - 8rem));
height: 5rem;
overflow: hidden;
transition: all 700ms ease-in-out; #1
}
div > *:not(h2) {
opacity: 0;
transform: translateY(1rem);
transition: all 700ms ease-in-out; #1
}
section:hover div, #2
section:focus-within div { #3
transform: translateY(0);
height: calc(350px - 4rem);
}
section:hover div > *:not(h2), #4
section:focus-within div > *:not(h2){ #5
opacity: 1;
transform: translateY(0);
}
}
The complete card rule shows the combined media query alongside its hover and focus-within reveal styles. section 5.5
