How does the SLDS grid system work and what are utility classes?

The SLDS grid is a 12-column flexbox-based layout system. The container uses slds-grid, and columns use slds-col with size modifiers like slds-size_1-of-2 (half width) or slds-size_4-of-12. Responsive breakpoints use prefixes: slds-medium-size_ and slds-large-size_. Utility classes are single-purpose CSS classes for spacing, typography, and layout without writing custom CSS. Examples: slds-p-around_medium (padding), slds-m-bottom_small (margin), slds-text-heading_large, slds-truncate (ellipsis overflow). Blueprint components are SLDS-provided HTML/CSS patterns for standard UI elements (cards, badges, pills, data tables, modals) that establish the correct structure before adding JavaScript behaviour. Using utilities and blueprints ensures designs remain consistent with native Salesforce UI.