# Grid

• Hi everyone, I’ve been learning to use drawbot; I’m trying to make a grid, I’ve figured the next code, but I have problems with a guide at the end of the canvas both x and y side. Does anybody know how can I fix it? Thank you very much.

``````#We're going to create the canvas

def canvas(w, h):
newPage(w, h)

fill(1)
rect(0, 0, w, h)

canvas(1000, 1000)

#Defining the grid

rows = 1
cols = 1

strokeWidth(2)
stroke(0,1,1)

def vGuide (cols, gutter):
for currentCol in range(cols):
pos = width()/(cols)
x = width()/(cols) + currentCol*pos
y = 0
print(pos)

line((x-(gutter/2), y),(x-(gutter/2), height()))
line((x+(gutter/2), y),(x+(gutter/2), height()))

def hGuide (rows, gutter):
for currentRow in range(rows):
pos = width()/(rows)
x = 0
y = width()/(rows) + currentRow*pos
print(pos)

line((x, y-(gutter/2)),(width(), y-(gutter/2)))
line((x, y+(gutter/2)),(width(), y+(gutter/2)))

#Execute

vGuide(4, 12)
hGuide(4, 12)
``````

• hello @eduairet,

the number of spaces between columns is the number of columns + 1. so:

``````def vGuide(cols, gutter):
for currentCol in range(cols+1):
x = width() / cols * currentCol
# ...

def hGuide(rows, gutter):
for currentRow in range(rows+1):
y = height() / rows * currentRow
# ...
``````

you can also loop over the actual rows and columns to create a grid using rectangles:

``````size(1000, 700)

cols = 4
rows = 3
gutter = 12

w = (width()  - gutter * (cols + 1)) / cols
h = (height() - gutter * (rows + 1)) / rows

fill(None)
strokeWidth(2)
stroke(0, 1, 1)

for col in range(cols):
for row in range(rows):
x = gutter + col * (w + gutter)
y = gutter + row * (h + gutter)
rect(x, y, w, h)
``````

cheers!

• @gferreira said in Grid:

w = (width() - gutter * (cols + 1)) / cols
h = (height() - gutter * (rows + 1)) / rows

Thank you very much, it worked way much better, I also tried to add a margin feature that worked well so now I can design over the grid ``````size(1000, 1000)

cols = 3
rows = 3
gutter = 12

#Margin

mTop = 10 - gutter
mBottom = 20 - gutter
mLeft = 10 - gutter
mRight = 10 - gutter

w = (width() - gutter * (cols + 1)) / cols - ((mRight + mLeft) / cols)
h = (height() - gutter * (rows + 1)) / rows - ((mTop + mBottom) / rows)

fill(None)
strokeWidth(1)
stroke(0, 1, 1)

for col in range(cols):
for row in range(rows):
x = gutter + col * (w + gutter)
y = gutter + row * (h + gutter)
rect(x + mLeft, y + mBottom, w, h)
``````