Which statement best distinguishes a grid system from a layout grid in UI design and how they support responsiveness?

• A. A grid system is a framework of columns, gutters, and margins; a layout grid is the visible application of that framework to content, and together they enable consistent alignment and scalable rearrangement across breakpoints.
• B. A grid system is used only for alignment, while a layout grid dictates interactive behavior.
• C. A grid system determines color and typography, while a layout grid governs spacing.
• D. A grid system is fixed; a layout grid has no impact on responsiveness.

Answer: (A)

The main idea is that a grid system provides the underlying scaffolding—columns, gutters, and margins—while the layout grid is the visible application of that scaffolding to content. When you design for multiple screen sizes, you adjust how the framework is realized at each breakpoint so elements align consistently and can rearrange fluidly as the viewport changes. That combination—the abstract framework plus its concrete, responsive application—lets you keep structure and spacing coherent across devices.

Why this fits best: it accurately distinguishes the planning layer from the visual application and shows how both work together to support responsive rearrangement. The other descriptions misstate roles—grid systems aren’t limited to alignment only or dictate interactive behavior, grids don’t govern color or typography, and a grid can be responsive rather than fixed.