Questions on Tips and Tricks

I agree with @wcavataio about grids, and I also like his choice of words: ‘practice’. I think grids become easier as you gain experience.

Since you’re a ‘designer first’, I suspect you’ve got your design planned out before you start laying it out in Editor X. If that’s the case, here’s something that works for me:

I plan my grid layout for each breakpoint in advance, and, when I apply a grid at the desktop level – and before I add content – I go immediately to the other breakpoints and adjust the grid as needed. It’s really easy to do them all at once, because you can change breakpoints without leaving the ‘Adjust Grid’ editor view.

Sometimes, when I lay out my grid, I also lay in some different-colored containers to represent elements that I’ll add later. Those containers make it easier to spot problems, and, because I haven’t invested much effort in them, I don’t feel bad about deleting them and starting over if I’ve misjudged something.

Also, remember that containers can have their own grids. So you can build a grid that gives you a big picture structure, add containers within that grid, and apply individual grids to those containers so that you can separately structure their contents.

And one more thing that may be important to you as a designer: Don’t feel restricted to the default breakpoints. Drag the resizing handles through the full range within each breakpoint and see how it looks. You may find that adding and editing breakpoints allows you to better adjust your design.