Hi @mayling, take a look at the attached, it is adapted from the Drag and Drop demo.
grid.psyexp (10.5 KB)
Set the size of the grid and the number of rows using the variables in the code component, where the squares within are created proportionately i.e., square size / number of rows (in pixels). Set the number of black squares for each trial using the nBlack variable. These variables can be replaced by variables from a conditions file, so you could have a different number of black squares on each trial.