Creating a grid for art

Hi, I’m trying to create grid that makes it so the rectangles that are created by my mouse clicks are lined up perfectly on either the x or y axis. This is all so I can make pixel art that’s consistent. This is what I have so far:

void setup() {
  size(500,400);
  background(0);
}

void draw() {
  if (mousePressed) {
    stroke(10);
    fill((255),(255),random(255));
    rect(mouseX, mouseY, 50, 50);
  }
}

I quote from the forum

MouseX and MouseY are linear values. You need some “scalar” values like:
GridSize=100;
MX= int(MouseX/GridSize)*GridSize;
// (MX IS NOW A MULTIPLE OF 100)

Then use MX instead of MouseX

same for y