Ready
Layout
Use layout to organize visual elements and to help guide users’ attention through a user experience.
Structure
Use layout classes to provide a clear structure to a UI design. This will improve the page readability and allow users to easily find what they’re looking for. ¹
Gaps
Use the layout-gap classes to create clear separation between different pieces of content on the page. ¹
White Space
Use white space to give breathing room around your page elements and to help users focus on what’s most important. ² This can be done using the layout-width classes to give a content container a max-width and add white space around around it.
Optimize for screen size
Use the breakpoint specific stacking methods to optimize your layouts for different screen sizes.
Do
Don't
More
Additional Reading
Using Grids in Interface Designs https://www.nngroup.com/articles/using-grids-in-interface-designs/
Understand Layout in App Design…in 10 minutes https://uxplanet.org/layout-in-app-design-in-10-minutes-f05ed6a32c44