If you're like me and just need an extra visual helper, you might find this useful.
Drop a panel in your project and name it "Grid1".
namespace GridHelper
{
const var Grid1 = Content.getComponent("Grid1");
Grid1.setPaintRoutine(function(g)
{
drawPandelGrid();
});
inline function drawPandelGrid()
{
local a = this.getLocalBounds(0);
// Size Controls
local NumBarsX = 10; // Number of Vertical Lines
local NumBarsY = 10; // Number of Horizontal Lines
local BarHeight = 1; // Horizontal Bar Size
local BarWidth = 1; // Vertical Bar Size
// Colour Controls
local BarColour = Colours.withAlpha(Colours.black, 0.5); // Bar Colour
local BackgroundColour = Colours.withAlpha(Colours.pink, 0.5); // Optional Background Colour
// Spacer Logic
local spacerY = a[3]/NumBarsY; // Horizontal Line Spacing
local spacerX = a[2]/NumBarsX; // Vertical Line Spacing
// Paint Background
g.fillAll(BackgroundColour); // Optional Background Colour
g.setFont("ArialBOLD", 12);
g.drawAlignedText("GRIDHELPER1.0", [5,5,100,5], "left");
// Paint Lines
for (i=0;i<=NumBarsX;i++) // Vertical Lines
{
local x = i * spacerX - (BarWidth/2); // Center Line ON grid
g.setColour(BarColour);
g.fillRect([x,0,BarWidth,a[3]]);
}
for (i=0;i<=NumBarsY;i++) // Horizontal Lines
{
local y = i * spacerY - (BarHeight/2); // Center Line ON grid
g.setColour(BarColour);
g.fillRect([0,y,a[2],BarHeight]);
}
}
}
Its a snippet from @Morphoice that I modified to have both horizontal and vertical lines, made it modular with the all the controls variables and customizable so you can set a different amount of x or y bars/lines. Comes in handy sometimes when I just want to visualize a certain part of my plugin and make sure its equally spaced to my desired paramaters.
(idk if something like this exists already but I thought it was good excercise regardless). Bless! 
