Tkinter - Grid elements next to each other
<p>I'm trying to make some UI in python with tkinter.</p>

<p>This is a sample of the code I'm using:</p>

<pre><code>root = Tk()
root.geometry("1000x700x0x0")

canvas = Canvas(root, width = 700, height = 700, bg ='white').grid(row = 0, column = 0)
button1 = Button(root, text = "w/e", command = w/e).grid(row = 0, column = 1)
button2 = Button(root, text = "w/e", command = w/e).grid(row = 1, column = 1)
</code></pre>

<p>This is what i'm getting:<a href="https://i.stack.imgur.com/TF65P.png" rel="nofollow"><img src="https://i.stack.imgur.com/TF65P.png" alt="enter image description here"></a></p>

<p>and this is what I want:<a href="https://i.stack.imgur.com/S6x7B.png" rel="nofollow"><img src="https://i.stack.imgur.com/S6x7B.png" alt="enter image description here"></a></p>

<p>Any help on how can I do it?</p>

<p>Thanks!</p>

<p>Since your GUI seems to have two logical groups of widgets, I would organize it as such. Start by placing the canvas on the left and a frame on the right. You can use <code>pack</code>, <code>place</code>, <code>grid</code>, or a paned window to manage them. For a left-to-right orientation, <code>pack</code> is a good choice due to its simplicity</p>

<p>Note that you don't have to do it this way, but experience has taught me it makes layout problems much easier to solve.</p>

<p>In the following example I set <code>expand</code> to <code>False</code> for the button frame, which means that the canvas will grow and shrink when the user resizes (because it has <code>expand=True</code>), but the buttons will only take up exactly as much space as they need. </p>

<pre><code>canvas = Canvas(root, ...)
buttonframe = Frame(root, ...)

canvas.pack(side="left", fill="both", expand=True)
buttonframe.pack(side="right", fill="both", expand=False)
</code></pre>

<p>Next, you can put all of the buttons in the right side without having to worry how their placement might affect objects on the left.</p>

<p>The important thing to remember when using <code>grid</code> is that you should designate at least one row and at least one column to be given any extra space. This can be a row and/or column that contains widgets, or it can be an empty row and column on an edge.</p>

<pre><code>button1 = Button(buttonframe, ...)
button2 = Button(buttonframe, ...)
button3 = Button(buttonframe, ...)
...
button1.grid(row=0, column=0)
button2.grid(row=0, column=1)
button3.grid(row=1, column=0)
...
buttonframe.grid_rowconfigure(100, weight=1)
buttonframe.grid_columnconfigure(2, weight=1)
</code></pre>

<hr>

<p>note: if you need to keep a reference to a widget, you must create the widget and call <code>grid</code> (or <code>pack</code> or <code>place</code>) on two separate lines. This is because <code>Button(...).grid(...)</code> returns the value of the last function call, and <code>grid(...)</code> returns <code>None</code></p>

python tkinter