Layout Considerations in MDX
The best layouts puts your content first and guides users naturally through their experience.
Your content should drive every layout decision — not the other way around. When users understand your content structure immediately, they can focus on what matters most: completing their tasks and achieving their goals.
Different devices bring different opportunities and constraints. Mobile users interact differently than desktop users, and what works on a tablet might not work on a phone. That's why MDX provides layout recommendations with 5 responsive breakpoints and practical guidance for each screen size.
When designers and developers work together from the start, they can balance user needs with technical realities. This ensures your layout choices create cohesive, user-friendly experiences across every platform and device.
Use MDX's layout recommendations as your guide, implement a grid system and spacing that best fits your specific project requirements and user context.
MDX breakpoints work with flex fonts, flex spacing, and flex sizing tokens that adapt automatically to different screen contexts.