Responsive definition list
A readable definition list that turns into a comfortable single-column reference on narrow screens.
Open folder
A readable definition list that turns into a comfortable single-column reference on narrow screens.
Create a beginner-friendly responsive definition list using semantic HTML and dependency-free CSS. Use a section with a visible heading, a real dl element, and three div groups containing dt terms and dd descriptions. Use CSS Grid for a three-column desktop layout with minmax(0, 1fr), then collapse to one column below 620px while preserving the source reading order. Use scoped classes, min-width: 0, readable contrast, visible keyboard focus styles, 320px-safe wrapping, no JavaScript, no frameworks, no external assets, and a reduced-motion fallback when motion is introduced. Return complete copy-ready HTML and CSS, then explain the dl structure and responsive breakpoint for a beginner.