Common Layout Problems

Tips

Always Follow "The River Rule"

Browsers, like rivers, have a natural organic flow to the layout.

Just like a river, you want to respect that as much as possible, and use it to your advantage.

Your goal is to break from that natural flow only in the specific places you must. That means two things;

• Only use grid and flex on the specific elements where they are needed;
• Keep your styles clean; to undo a style, don't override it back to the default ( overrides show as blue ). Reset that override by ALT-CLICKing it, or by clicking the blue label and then the reset button.

Maintain a Clean Layout Structure

• 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.

Watch out for padding and margins

At narrower breakpoints, these may not fit, and they will push out the entire grid.

Make Your 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.

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.

‍

‍