Clean Layout Strategy
- Generally, avoid applying flex / grid directly to the body element. It would rarely solve a useful purpose, and will complicate debugging of your layout in the child elements.
- Generally, avoid complex layered arrangements of grids & flex elements. It will probably work, but it will be very difficult for you to navigate your own design.
Localizing Layout Issues
Use the blue outline in the designer to identify which elements are wider than the current breakpoint. When you see the blue outline going outside of your canvas, you know something is "breaking" that elements layout. If the element's outline fits correctly on the canvas, you know that it, and its children, are not the problem.
Common Problems
Watch out for padding and margins on elements. At narrower breakpoints, these may not fit, and they will push out the entire grid.
Making Grids Responsive
To support narrower breakpoints, reduce the number of columns in your grid ( with Row layout setting ) to change the flow to a narrower design as you reduce breakpoints. In general, sticking to auto-layout whenever possible will make this even easier.
At points where you reduce the number of columns, watch out for immediate child items which have a colspan that exceed it, e.g. a 1 column grid, but a child grid item that specifies a colspan of 2. That will break your layout.
Strategies
